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

debugcn 发表于 Dev

哈夫苏尔·马鲁（Hafsul Maru）

视图的一部分是这样的

  <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个选择元素被迭代，第一个选择框没有被修改。

罗里·麦克罗森（Rory McCrossan）

假设返回的字符串中的值的索引select与HTML中的索引的索引匹配，则最简单的方法是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。这是非常糟糕的做法，而且您也不需要

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。