CODEWITHSUNDEEP
jquery
Hafsul Maru
Hafsul Maru

Reputation: 393

select elements iterate by jquery, the first one remains unchanged

part of view is something like this

  <div id="edit_selected_attributes">
 <div>
  <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_9">
 <option> Select  Com Weight</option>
 <option value="12">1</option>
 <option value="13">2</option>
 <option value="14">3</option></select>
</div>
<div>
 <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_11">
 <option> Select  Composition</option>
 <option value="15">1</option>
 <option value="16">2</option>
 <option value="17">3</option>
</select>
</div>
<div>
<select class="form-control edit-select-attribute" id="edit_inv_attribute_id_12">
<option> Select  Composition</option>
<option value="18">1</option>
<option value="19">2</option>
<option value="20">3</option>
 </select></div>
<div>
<select class="form-control edit-select-attribute" id="edit_inv_attribute_id_16">
<option> Select  Composition</option>
<option value="22">1</option>
<option value="23">2</option>
<option value="24">3</option>
</select></div>
<div>
<select class="form-control edit-select-attribute" id="edit_inv_attribute_id_17">
<option> Select  Composition</option>
<option value="26">1</option>
<option value="27">2</option>
<option value="28">3</option>

Then I retrieved two numbers from database as a string like "12,16,18,22,28" Split them into array [12,16,18,22,28]

retrieve and iterate like this

  $.ajax({
   type: 'post',
    url:"{{url('library/inv_item/get_item_data')}}",
    async:false,
   data:{inv_item_id:inv_item_id},
   success: function(data4){  /* data4 = "12,16,18,22" */                                         
   var data5 = data4.split(',');

   $('.edit-select-attribute').each(function(ind,val){                    
    $.each(data5,function(i5,v5){
     var v5 = parseInt(v5);
       $('.edit-select-attribute').find('option[value='+v5+']').prop({'selected':true},);
   });
   });
  $('#editInvItemDiv').dialog('open');   
   },
  error: function(data5){},                            
   });

Showing the element in a ui dialog window. The problem is that only last 4 select elements is iterated, the first select box is untouched.

SelectElements

Upvotes: 1

Views: 18

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The simplest way to do this, assuming the index of the values in the returned string match the index of the select in the HTML, would be to split() the returned string in to an array and then provide a function to val() which returns the relevant value from the array based on the index of the current select. Try this:

// in your AJAX success handler...
var data4 = "12,16,18,22,28";
var responseArr = data4.split(',');
$('select.form-control').val(function(i) {
  return responseArr[i];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edit_selected_attributes">
  <div>
    <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_9">
      <option> Select Com Weight</option>
      <option value="12">1</option>
      <option value="13">2</option>
      <option value="14">3</option>
    </select>
  </div>
  <div>
    <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_11">
      <option> Select Composition</option>
      <option value="15">1</option>
      <option value="16">2</option>
      <option value="17">3</option>
    </select>
  </div>
  <div>
    <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_12">
      <option> Select Composition</option>
      <option value="18">1</option>
      <option value="19">2</option>
      <option value="20">3</option>
    </select>
  </div>
  <div>
    <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_16">
      <option> Select Composition</option>
      <option value="22">1</option>
      <option value="23">2</option>
      <option value="24">3</option>
    </select>
  </div>
  <div>
    <select class="form-control edit-select-attribute" id="edit_inv_attribute_id_17">
      <option> Select Composition</option>
      <option value="26">1</option>
      <option value="27">2</option>
      <option value="28">3</option>
    </select>
  </div>
</div>

Also note that you should remove async: false. It's very bad practice and you don't need it anyway

Upvotes: 1

Related Questions