Javascript Jquery将选项添加到所有ID

任务： 在我的HTML中，更改first select的选项后，我希望将其传播到具有类似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);

  });
})

---

注: 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>');
    };
  });
});

$（'.script_display'）。在（'change'，'.suite'，function（）上{
//注意这里使用的var，这样它们就不会成为全局变量
//调试器；
var attr=$（this.attr（“数据标记”）；
var attr_val=$（this.val（）；
$（'select.tc[data tag^=“”+attr+'“]”）。每个（函数（）{
var$this=$（this）；//避免多次重复同一jQuery构造函数
如果（$this.val（）！==attr\u val）{
$this.empty（）.append（“”+attr_val+“”）；
};
});
});

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

  });
});

$（'.script_display'）。在（'change'，'.suite'，function（）上{
//注意这里使用的var，这样它们就不会成为全局变量
var attr=$（this.attr（“数据标记”）
var attr_val=$（this.val（）；
$（'select.tc[data tag=“”+attr+“]”）。每个（函数（）{
var$this=$（this）；//避免多次重复同一jQuery构造函数
如果（$this.val（）==null）{
$this.append（“”+attr_val+“”）
$this.trigger（“已选择：已更新”）；
}
$this.val（attr_val）；
});
});

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

  });
});

$（'.script_display'）。在（'change'，'.suite'，function（）上{
//注意这里使用的var，这样它们就不会成为全局变量
var attr=$（this.attr（“数据标记”）
var attr_val=$（this.val（）；
$（'select.tc[data tag=“”+attr+“]”）。每个（函数（）{
var$this=$（this）；//避免多次重复同一jQuery构造函数
如果（$this.val（）==null）{
$this.append（“”+attr_val+“”）
$this.trigger（“已选择：已更新”）；
}
$this.val（attr_val）；
});
});

你能添加一段HTML让我们更好地理解你的JS吗？你能添加一段HTML让我们更好地理解你的JS吗？是的，数据标签做到了，但我修改了你的答案以满足我的要求谢谢@Mike McCaughan是的，但我修改了你的答案以满足我的要求谢谢@Mike McCaughan