0

这是我到目前为止所拥有的：

<!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>具有相同类名的所有元素（在此示例中，公共类是“产品”）？

4

4 回答 4

1

代替

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

尝试

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

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

更新：

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

var xkey = MyArray[jQuery.trim(jQuery(this).find("option:selected").text())];
于 2013-01-15T20:01:49.187 回答
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);

      }
 }
于 2013-01-15T20:05:27.683 回答
1

您需要将事件绑定到每个元素。使用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);
    })
 });
于 2013-01-15T20:08:41.863 回答
1

这样做使用.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);
    }
  });
});

参考现场演示

这样做的其他方式使用.map()

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

参考现场演示 - 使用 map()

于 2013-01-15T20:19:54.570 回答