Question

任务：在我的HTML中，在更改第一个选择的选项时，我希望将其传播到具有相似ID的所有选项。因此，如果存在选择框的其余部分，请更改该选项;如果不退出则添加新选项，

    $('.script_display').on('change','[id^=suite_]',function(){
  attr = $(this).attr("id").split("_")[1];
  attr_val = $(this).val();
  $('[id^="tc_"][id$="_'+attr+'"]').each(function(){
    if ($(this).val() === null){
      $(this).append('<option value="'+attr_val+'" selected="selected" >'+attr_val+'</option>')
      $(this).trigger("chosen:updated");
    }
    $(this).val(attr_val);

  });
})

select with ID更改以suite_开头我希望获取值并更改/添加选项以所有以tc_开头并以"_'+attr+'"'结尾的ID，其中attr由suite_共享{1}}和tc_

问题这只能在我更改suite_中的选项时每隔一段时间运行一次，我无法在每次更改时都能正常工作

编辑：

{% for tag in ['customer','test-phase','modular-pkg','test-type','topology','tgn-type','link-type']  %}
      <div class="col-sm-4">
          {{tag}}: <select style='width:100%' class="action-btn input-lg" name="suite_{{tag}}" id="suite_{{tag}}">
           {% for item in tag_map_ref_yml[tag]['valid_value']: %}
                 <option value={{item}}>{{item}}</option>
           {% endfor %}
          </select>
       </div>
 {% endfor %}

{% for tc in range(1,32) %}
 {% for tag in ['customer','test-phase','modular-pkg','test-type','topology','tgn-type','link-type']: %}
       <div class="col-sm-4">
           {{tag}}:<select style='width:100%' class="action-btn input-sm" name="tc_{{tc}}_{{tag}}" id="tc_{{tc}}_{{tag}}">
            {% for item in tag_map_yml[tag]['valid_value']: %}
               <option value={{item}}>{{item}}</option>
            {% endfor %}
           </select>
       </div>
 {% endfor %}
{% endfor %}

注意： tag_map_ref_yml将有比tag_map_yml

更多的选项

溶液：

$('.script_display').on('change','.suite',function(){
  // Note the use of var here so that they don't become global variables
  // debugger;
  var attr = $(this).attr("data-tag");
  var attr_val = $(this).val();
  $('select.tc[data-tag^="'+attr+'"]').each(function(){
    var $this = $(this); // avoid repeating the same jQuery constructor multiple times
    if ($this.val()!==attr_val){
      $this.empty().append('<option value="'+attr_val+'" selected="selected" >'+attr_val+'</option>');
    };
  });
});

Answer 1

ID（或实际上任何属性）的部分匹配可以说是选择元素的最糟糕方式。而是添加class es和/或data-属性，这些属性封装了您要搜索的每个方面。例如，而不是：

class="action-btn input-lg" id="suite_{{tag}}"

class="action-btn input-sm" id="tc_{{tc}}_{{tag}}"

使用此：

class="action-btn input-lg suite" id="suite_{{tag}}" data-tag="{{tag}}"

class="action-btn input-sm tc" id="tc_{{tc}}_{{tag}}" data-tc="{{tc}}" data-tag="{{tag}}"

然后你的jQuery变得更容易编写和理解：

$('.script_display').on('change','.suite',function(){
  // Note the use of var here so that they don't become global variables
  var attr = $(this).attr("data-tag")
  var attr_val = $(this).val();
  $('select.tc[data-tag="' + attr + '"]').each(function(){
    var $this = $(this); // avoid repeating the same jQuery constructor multiple times
    if ($this.val() === null){
      $this.append('<option value="'+attr_val+'" selected="selected" >'+attr_val+'</option>')
      $this.trigger("chosen:updated");
    }
    $this.val(attr_val);

  });
});

Jquery为所有id添加选项

1 个答案: