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_開始我想要得到的價值和改變/添加選項所有的ID與TC_開始，以"_'+attr+'"'其中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部分匹配（或任何真正的屬性）是可以說是選擇元素的最糟糕的可能方式。相反，請添加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); 

    }); 
});