javascript - Jquery为所有id添加选项

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

  });
})

在选择 ID 以 suite_ 开头的更改后，我想获取值并更改/添加选项到所有以 tc_ 开头并以 "_'+attr+' 结尾的 id "' 其中 attr 由 suite_ 和 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(或实际上任何属性)的部分匹配可以说是选择元素的最糟糕的方式。相反，添加classes和/或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);

  });
});