Javascript 初学者正在努力使用JQuery。更改标签

我很了解HTML，正在努力学习JQuery。我在上找到了.change函数，它完全符合我的要求

理想情况下，我希望test1和test2只相互影响，test3和test4只相互影响，以此类推

现在test2和test4同时影响test1和test3

这是我的密码：

<select id="test1" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>

<div id="test2"></div>

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


<select id="test3" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>

<div id="test4"></div>

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

我试着用身份证把它分开，但还没有完全分开。 我怎样才能让它正常工作？

这行：

 $("select option:selected").each(function () {

应该这样写：

$("#test1 option:selected").each(function() {

---

通过在该行中使用泛型select，您选择了页面上的每个select元素，而不是使用其id，它将只针对所需的select标记。

这是因为您选择了页面上的所有选定选项。 而不是$select选项：已选定。每个。。使用$this.findselect选项：选中。每个。。。这样，它将只显示在test2 div中更改的select的选定选项，而不显示来自其他select的选项

$("select#test1").change(function () {
  var str=$("#test1 :selected").text();
  $("div#test2").text(str);
});

js小提琴

---

您实际需要的似乎是一个将选择框与其同级div标记关联起来的通用控件。因此，您需要一些不同的东西：

因此，首先单独定义update函数，而不是直接将其分配给变更处理程序，然后触发变更事件。尽管这样做是一个非常好的黑客行为，但如果还有其他事情需要监听更改事件，它会带来奇怪的问题

然后，要获取要将字符串分配给的div，因为您知道它总是下一个同级，只需使用.next

要构建您正在构建的以空格分隔的字符串，而不是each循环，您可以只使用map函数，该函数在本例中仅获取selected list selected option标记中的每个元素并返回它们的文本值。结果是一个简单的数组，其中包含您想要的内容，然后JS内置的.join方法从中构建最终字符串

---

您似乎已经注意到更新函数中的this对象是select标记；您可以使用它作为搜索的上下文，例如调用$'option:selected'，这样就可以只获取该标记的选项，而不必求助于ID并尝试返回给定处理程序中所引用的select。

对不起，我不太理解您的问题。您是否正在尝试将selectbox的选定值文本放置到其各自的div中？嗨，尼克斯，很抱歉，让我澄清一下：因此，当我希望test2仅显示test1中的选定项时，它也会显示test3中的选定项，我想我必须在此处添加一个函数，以便代码调用，但我不知道该怎么做。这不是问题的答案，但你应该给出答案，而不是仅仅给出答案。感谢黑暗骑士，我从Jquiry网站上复制了该代码，并添加了ID，希望这能解决问题。很遗憾，ID不是这里的答案。您需要将所选选项值显示为div的文本。我说得对吗？是的，就是这样！非常感谢。我认为ID是关键，我只是认为指定$selecttest1会影响$select选项：selected，但现在我看到它不是一个孩子，需要它自己的ID。再次感谢

(function() {
    function update() {
        var str = $.map($('option:selected', this), function(option) {
            return $(option).text();
        }).join(' ');

        $(this).next().text(str);
    };

    $("select").change(update)
    .each(update);
})();