is that possible i get part of my selected option in javascript?

Question

I have this code in my 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>');

I need value['code'] and value2['service'] in hidden inputs so i can save them in my DB, is that possible?

update

    <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>

update 2

here is what i added to my ajax code and returning the result i want, but the problem is it return results like 30 times instead of only once:

$('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" >');
});

Answer 1

SOLVED

I added code below at the bottom of my ajax and it's working without looping results many times.

// 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+'">');
});

Thanks to Bai Nguyen for the idea.

Answer 2

You can add to data attribute of option

    <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 
})

Answer 3

Hope this helps.

$('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');