Question

部分视图是这样的

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

然后我从数据库中检索了两个数字，如“ 12,16,18,22,28”这样的字符串。将它们拆分为数组[12,16,18,22,28]

像这样检索和迭代

  $.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){},                            
   });

在ui对话窗口中显示元素。问题在于，只有最后4个选择元素被迭代，第一个选择框没有被修饰。

Answer 1

最简单的方法是，假设返回的字符串中的值的索引与HTML中的select的索引相匹配，将split()返回的字符串放入一个数组中，然后然后向val()提供一个函数，该函数根据当前select的索引从数组中返回相关值。试试这个：

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

还要注意，您应该删除async: false。这是非常糟糕的做法，您还是不需要它

选择元素通过jquery进行迭代，第一个元素保持不变

1 个答案: