Question

我有多个不同的选择标签，具有相同的选项，并且在每个选择标签中启用了多选。

<select name="city_id1" id="city_id1">
    <option value="1">q</option>
    <option value="2">s</option>
    <option value="3">sasdad</option>
</select>
<select name="city_id2" id="city_id2">
    <option value="1">q</option>
    <option value="2">s</option>
    <option value="3">sasdad</option>
</select>

我查看了https://api.jquery.com/change/，它向我展示了如何在选择任何选项时触发事件，但在他们给出的示例中

<script>
    $( "select" )
      .change(function () {
        var str = "";
        $( "select option:selected" ).each(function() {
          str += $( this ).text() + " ";
        });
        $( "div" ).text( str );
      })
      .change();
    </script>

它将所有选择标签中的选定选项聚合在一起。我希望city_id1中的选择选项与city_id2分开。例如，city_id1的内容显示在自己的div中，而city_id2的内容显示在自己的div中。

此外，可能有很多选择标签（不仅仅是2个），因此解决方案最好不要硬编码city_id和city_id2。

Answer 1

您需要修改内部选择器：

$( "select" )
  .change(function () {
    var str = "";
    $( "option:selected", this ).each(function() { // <--- this line
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .change();

这将确保您只选择所选的选项，这些选项是已更改的select元素的子元素。

$("option:selected", this)

表现得像：

$(this).find("option:selected")

Answer 2

当您使用$("select")时，它会影响每个<select>元素的更改事件。如果您想对特定<select>元素的更改事件进行更改，请使用选择器。如前面的答案中所述。所以你的代码看起来像，

$("#city_id1").change(function(){
  // Your code
});

和另一个相同。

Jquery获取特定选择标记中所选名称的列表

2 个答案: