У меня есть этот код в моем JavaScript:

$('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] +'</option>');

Мне нужны value['code'] и value2['service'] в скрытых входах, чтобы я мог сохранить их в своей БД, это возможно?

Обновить

    <script>
  jQuery( document ).ready( function( $ ) {
    $('body').on('change', 'select[name="city"]', function(e){
      $.ajaxSetup({
          headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
      });

       var cityID = $(this).val();
       var weight = ["{{$totalWeight}}"];
        if(cityID) {
            $.ajax({
              url: '{{ url('rajaajax') }}/'+weight+'/'+encodeURI(cityID),
              type: "GET",
              dataType: "json",
              success:function(data) {
                $('#des').empty();
                $('#des').append(
                  '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] +'</p>'
                  );
                $.each(data.data, function(key, value) {
                  $.each(value.costs, function(key2, value2) {
                    $.each(value2.cost, function(key3, value3) {

                      // number format
                      var number = value3['value'];
                      var nf = new Intl.NumberFormat('en-US', {
                          maximumFractionDigits:0, 
                          minimumFractionDigits:0
                      });
                      var formattedNumber = nf.format(number);
                      // number format
                      $('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="'+ value3['value'] +'">'+ value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] +'</option>');

                      // console.log(value);
                      // alert(value.code); // jne-pos
                      // alert(value2.service); //oke -reg
                      // alert(value3.value); // 43000 - etd 24 jam
                    });
                  });

                });
              }
            });
        }else{
          $('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
        }
    });
  });
</script>

html

<div id="des"></div>
<div id="calcul" class="mb-20 mt-20">
<select name="postchoose" id="">
<option class="form-control" value="">Select Shiping Method</option>
</select>
<div id="courierinfo"></div> // i want my hidden input in this div
</div>

Обновление 2

Вот что я добавил в свой ajax-код и возвращает желаемый результат, но проблема в том, что он возвращает результаты как 30 раз, а не только один раз:

$('select[name="postchoose"]').on('change',function(){
  var selected = $(this).find('option:selected');
    var code = selected.data('code');
    var service = selected.data('service');
    $('div#courierinfo').append('<input type="hidden" value="'+code+'" name="courier" > <input type="hidden" value="'+service+'" name="courier_service" >');
});
0
mafortis 28 Фев 2018 в 07:52

3 ответа

Лучший ответ

РЕШИТЬ

Я добавил код внизу моего ajax, и он много раз работает без зацикливания результатов.

// show selected shipping information
$('select[name="postchoose"]').on('change',function(){
  var selected = $(this).find('option:selected');
  var code = selected.data('code');
  var service = selected.data('service');

  $('div#courierinfo').empty();
  $('div#courierinfo').append('Shipping: <span name="courier">'+code+'</span> - <span name="courier_service">'+service+'</span><br><input type="hidden" name="courier" value="'+code+'"><input type="hidden" name="courier_service" value="'+service+'">');
});

Спасибо Bai Nguyen за идею.

0
mafortis 28 Фев 2018 в 06:33

Вы можете добавить к данным атрибут опции

    <div id="des"></div>
<div id="calcul" class="mb-20 mt-20">
    <select name="postchoose" id="" onchange="addInputHidden(this)">
        <option class="form-control" value="">Select Shiping Method</option>

    </select>
    <div id="courierinfo">
        <!--i want my hidden input in this div-->

    </div>  
</div>
<script >
    function addInputHidden(element) {
        var $option = $(element).find('option:selected'),
                code = $option.data('code'),
                service = $option.data('service');
        if (!jQuery('#courierinfo .code_' + code).length) {
            jQuery('#courierinfo').append('<input class="code code_' + code + '" name="code[]" type="hidden" value="' + code + '"><input class="service code_' + code + '" name="service[]" type="hidden" value="' + service + '">');
        } else {
            jQuery('#courierinfo .code.code_' + code).val(code)
            jQuery('#courierinfo .service.code_' + code).val(service)
        }
    }

    jQuery(document).ready(function ($) {
        $('body').on('change', 'select[name="city"]', function (e) {
            $.ajaxSetup({
                headers: {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
            });
            var cityID = $(this).val();
            var weight = ["{{$totalWeight}}"];
            if (cityID) {
                $.ajax({
                    url: '{{ url('rajaajax') }}/' + weight + '/' + encodeURI(cityID),
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        $('#des').empty();
                        $('#des').append(
                                '<p>Destination: ' + data['meta']['destination']['province'] + ' , ' + data['meta']['destination']['type'] + ' , ' + data['meta']['destination']['city_name'] + ' , ' + data['meta']['destination']['postal_code'] + '</p>'
                                );
                        $.each(data.data, function (key, value) {
                            $.each(value.costs, function (key2, value2) {
                                $.each(value2.cost, function (key3, value3) {

                                    // number format
                                    var number = value3['value'];
                                    var nf = new Intl.NumberFormat('en-US', {
                                        maximumFractionDigits: 0,
                                        minimumFractionDigits: 0
                                    });
                                    var formattedNumber = nf.format(number);
                                    // number format
                                    $('select[name="postchoose"]').append('<option id="postchoose" class="form-control" value="' + value3['value'] + '" data-code="' + value['code'] + '" data-code="' + value2['service'] + '">' + value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) + ' Rp' + ' - ' + value3['etd'] + '</option>');
                                    // console.log(value);
                                    // alert(value.code); // jne-pos
                                    // alert(value2.service); //oke -reg
                                    // alert(value3.value); // 43000 - etd 24 jam
                                });
                            });
                        });
                    }
                });
            } else {
                $('select[name="postchoose"]').empty().append("<option value='' selected>Select</option>");
            }
        });
    });

</script>

$('select[name="postchoose"]').on('change',function(){
  var $option = $(this).find('option:selected),
  code = $option.data('code'),
  service = $option.data('service');
  // you can use ajax to send 
})
0
Bai Nguyen 28 Фев 2018 в 06:03

Надеюсь это поможет.

$('select[name="postchoose"]').append('<option id="postchoose" 
class="form-control" value="'+ value3['value'] +'" 
code="'+value['code']+'" service="'+value2['service']+'">'+ 
value['code'] + ' - ' + value2['service'] + ' - ' + nf.format(number) 
+' Rp' + ' - ' + value3['etd'] +'</option>');

var code=$('select[name="postchoose"] option:selected').attr('code');

var service=$('select[name="postchoose"] 
option:selected').attr('service');
1
Komal Bandi 28 Фев 2018 в 05:09