Question

这是我到目前为止所做的：

<!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>

问题是当我选择一个选项时它总是返回“undefined”。但是，如果我删除其中一个<select>元素，它可以正常工作！

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

Answer 1

而不是

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

尝试

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

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

<强> UPD ：

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

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

Answer 2

你的问题是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);

      }
 }

Answer 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);
    })
 });

Answer 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()

jQuery - 将函数应用于具有相同类名的多个select元素

4 个答案: