Question

熟悉HTML，我正在尝试学习JQuery。我在JQuery site上找到了.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>

我尝试将它与ID分开，但它还没有完全存在。我怎样才能让它正常工作？

Answer 1

这一行：

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

应该这样写：

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

通过在该行中使用通用“select”，您选择页面上的每个“select”元素，而不是使用其id，它将仅定位所需的select标记。

Answer 2

那是因为您正在选择页面上的所有选定选项。而不是$("select option:selected").each(..)使用$(this).find("select option:selected").each(..)。这样它只会显示test2-div中更改的选择的选定选项，而不显示其他选择中的选项。

Answer 3

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

小提琴 http://jsfiddle.net/xdJ3H/

Answer 4

看起来你真正想要的是一个将选择框与其兄弟div标签相关联的通用控件。为此你需要一些不同的东西：

http://jsfiddle.net/b9chris/KpUWP/

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

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

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

首先，您需要单独定义更新函数，而不是直接将其分配给change（）处理程序，然后触发change（）事件。虽然这样做是一个非常好的黑客，但如果还有其他事情需要监听更改事件，它会引入奇怪的问题。

然后要获取要分配字符串的div，因为您知道它始终是下一个兄弟，所以您只需使用.next()。

要构建您正在构建的以空格分隔的字符串，而不是每个循环，您只需使用map函数，该函数只接受所选列表中的每个元素（在这种情况下选择选项标记）并返回其文本值。结果是你想要的简单数组，JS内置的.join（）方法然后从中构建你的最终字符串。

看来你已经注意到更新功能中的这个对象是select标签;您可以将此作为搜索的上下文，例如调用$('option:selected', this)来获取该标记的选项，而不是必须求助于ID并尝试回退给定处理程序中引用的select。

初学者在与JQuery .change标签挣扎

4 个答案: