1

同じIDを使用して同じページに2つのドロップダウンリストがあるフォームがあります。

<select id="country">
  <option value="">Any</option>
  <option value="ENGLAND">England</option>
  <option value="IRELAND">Ireland</option>
  <option value="SCOTLAND">Scotland</option>
  <option value="WALES">Wales</option>
</select>

<select id="county">
  <option value="">Select a country first...</option>
</select>

<div style="clear:both">&nbsp;</div>

<select id="country">
  <option value="">Any</option>
  <option value="ENGLAND">England</option>
  <option value="IRELAND">Ireland</option>
  <option value="SCOTLAND">Scotland</option>
  <option value="WALES">Wales</option>
</select>

<select id="county">
  <option value="">Select a country first...</option>
</select>

2番目の郡のドロップダウンリストが最初の郡のドロップダウンリストと同じように機能するように、JavaScriptコードを変更する方法がわかりません。既存のJavaScriptとその機能は次のとおりです。

http://jsfiddle.net/pfYEb/10/

4

2 に答える 2

3

セレクターが両方に一致するように、id="country"の代わりにclass="country"を使用することをお勧めします。（id = "county"についても同じです）jsfiddleでは、国の変更イベント内で変更する郡を区別する必要もあります。これを行う簡単な方法の1つは、現在の要素のインデックスを使用することです。

ここであなたのjsfiddleをフォークしました。

HTML

<select class="country">
  <option value="">Any</option>
  <option value="ENGLAND">England</option>
  <option value="IRELAND">Ireland</option>
  <option value="SCOTLAND">Scotland</option>
  <option value="WALES">Wales</option>
</select>

<select class="county">
  <option value="">Select a country first...</option>
</select>

<div style="clear:both">&nbsp;</div>

<select class="country">
  <option value="">Any</option>
  <option value="ENGLAND">England</option>
  <option value="IRELAND">Ireland</option>
  <option value="SCOTLAND">Scotland</option>
  <option value="WALES">Wales</option>
</select>

<select class="county">
  <option value="">Select a country first...</option>
</select>
​

関連するJavascript：

  $('.country').change(function() {
    var country = $(this).val(),
        county  = $('.county').eq($(".country").index(this)); // This matches the county

    // Empty county dropdown
    county.empty();

    // Update dropdown with appropriate contents
    if (country === '') {
      county.append('<option value="">Select a country first...</option>');
    } else {
      $.each(counties[country], function(i, v) {
        county.append('<option value="' + i + '">' + v + '</option>');  
      });
    }
  });
于 2012-12-02T00:16:43.093 に答える
2

idによるこのクエリを実際に解決することはできません。ちなみに、要素IDは、仕様によってドキュメント内で一意である必要があります。あなたのベストショット、classes代わりに使用してください。

于 2012-12-02T00:16:31.700 に答える