jQuery - 将函数应用于具有相同类名的多个选择元素答案

【问题标题】：jQuery - apply function to multiple select elements with same class namejQuery - 将函数应用于具有相同类名的多个选择元素
【发布时间】：2024-04-28 13:25:01
【问题描述】：

这是我目前所拥有的：

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="content-type" content="text/html" />
    <script src="http://code.jquery.com/jquery-latest.js">
    </script>
    <title>
      Select
    </title>
  </head>

  <body>
    <script type="text/javascript">
      var MyArray = {
        "Windows": "imgx.jpg",
        "Linux": "imgt.jpg",
        "Mac": "imgi.jpg",
        "MS DOS": "imgy.jpg",
        "1GB": "imggb.jpg"
      }

      jQuery(function() {

        jQuery('.product').change(function() {

          var xkey = MyArray[jQuery.trim(jQuery(".product option:selected").text())];

          if (typeof xkey == 'string') {

            alert(xkey);

          }

        });


      });
    </script>
    <div>
      <select name="options_random_nr_yy" class="product">
        <option value="">
          -- Select --
        </option>
        <option value="56">
          1GB
        </option>
        <option value="57">
          2GB
        </option>
        <option value="73">
          4GB
        </option>
        <option value="209">
          8GB
        </option>
      </select>
    </div>
    <div>
      <select name="options_random_nr_xx" class="product">
        <option value="">
          -- Select --
        </option>
        <option value="63">
          Windows
        </option>
        <option value="65">
          Linux
        </option>
        <option value="67">
          Mac
        </option>
        <option value="89">
          MS DOS
        </option>
      </select>
    </div>
  </body>

</html>

问题是当我选择一个选项时它总是返回“未定义”。但是，如果我删除 <select> 元素之一，它工作正常！

如何将相同的函数应用于具有相同类名的所有<select> 元素（在本例中，公共类是“product”）？

【问题讨论】：

用jQuery(".product option:selected").text()代替$(this).find("option:selected").text();

标签： javascript jquery class select multiple-instances

【解决方案1】：

您的问题是 jQuery('.product') 返回所有选择的列表，而不是当前选择的列表。大多数现代浏览器处理从一个 DomElement 列表到特定 DomElement 的转换（因此，如果您删除一个它会突然起作用），但是，在事件处理程序中，您可以使用 $(this) 来处理旧浏览器中的一个选项和多个所有浏览器中的项目。

($ 是 jQuery 的简写)

所以你想做的是：

 $(function(){
      $('.product').change(function(){
          var xkey = MyArray[$.trim($(this).find("option:selected").text())];
      }
      if (typeof xkey == 'string') {

        alert(xkey);

      }
 }

【讨论】：

【解决方案2】：

代替

var xkey = MyArray[jQuery.trim(jQuery(".product option:selected").text())];

试试

var xkey = MyArray[jQuery.trim(jQuery(this).val())];

在事件处理程序中，this 总是指向一个甚至发生过的元素。

UPD：

我看到你的 MyArray 有选项文本而不是选项值作为键，所以你应该使用：

var xkey = MyArray[jQuery.trim(jQuery(this).find("option:selected").text())];

【讨论】：

他想要的是文本，而不是值。

【解决方案3】：

您需要将事件绑定到每个元素。使用jQuery.inArray 搜索数组。清洁解决方案：

 jQuery(function() {

    jQuery('.product').change(function() {

        var xkey = jQuery.trim(jQuery(this).find('option:selected').text())

        if(jQuery.inArray(xkey, MyArray) && typeof xkey == 'string')
            alert(xkey);
    })
 });

【讨论】：

.each 在这里根本不需要。 $('.product').change(function(){}) 已经将事件处理程序附加到所有 .product
我已经优化了一点

【解决方案4】：

使用.each():-

这样做

var MyArray = {
        "Windows": "imgx.jpg",
        "Linux": "imgt.jpg",
        "Mac": "imgi.jpg",
        "MS DOS": "imgy.jpg",
        "1GB": "imggb.jpg"
      };
jQuery('.product').change(function() {
  jQuery(".product option:selected").each(function() {
    var xkey = MyArray[jQuery.trim(jQuery(this).text())];
    if (typeof xkey == 'string') {
      alert(xkey);
    }
  });
});

参考LIVE DEMO

使用.map()的其他方式

jQuery('.product').change(function() {
  $(".product option:selected").map(function(){
        var xkey = MyArray[jQuery.trim(jQuery(this).text())];
        if (typeof xkey == 'string') {
        alert(xkey);
        }
    });
});

请参考LIVE DEMO - Using map()

【讨论】：