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>要素の 1 つを削除すると、正常に動作します。

同じクラス名を持つすべての要素に同じ関数を適用するにはどうすればよいですか<select>(この例では、共通のクラスは「製品」です)。

4

4 に答える 4

1

問題は、jQuery（'。product'）が、現在選択されているものではなく、すべての選択のリストを返すことです。最近のほとんどのブラウザーは、1つのDomElementのリストから特定のDomElementへの変換を処理します（したがって、1つを削除すると、突然機能します）が、イベントハンドラー内で、$（this）を使用して、古いブラウザーの1つのオプションと複数のオプションを処理できます。すべてのブラウザのアイテム。

（$は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

それ以外の

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())];
于 2013-01-15T20:01:49.187 に答える
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);
        }
    });
});

LIVE DEMOを参照- map() の使用

于 2013-01-15T20:19:54.570 に答える