4

很好地了解 HTML，我正在尝试学习 JQuery。我在一个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>

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

4

4 回答 4

2

这一行：

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

应该这样写：

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

通过在该行中使用通用的“select”，您可以选择页面上的每个“select”元素，而是使用其 id，它只会针对所需的选择标签。

于 2013-05-24T06:43:29.400 回答
0

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

于 2013-05-24T06:44:45.227 回答
0 
$("select#test1").change(function () {
  var str=$("#test1 :selected").text();
  $("div#test2").text(str);
});

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

于 2013-05-24T06:56:15.530 回答
0

看起来您真正想要的是一个通用控件，它将选择框与其同级 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() 事件。虽然这样做是一个很好的 hack，但如果有其他东西需要监听 change 事件，它会引入奇怪的问题。

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

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

看来您已经注意到更新函数中的 this 对象是 select 标签；您可以将其用作搜索的上下文，例如调用 to$('option:selected', this)以仅获取该标记的选项，而不必求助于 ID 并尝试返回给定处理程序中引用的 select 内容。

于 2013-05-24T08:37:28.890 回答