1

3 つのドロップダウンがある Web ページがあります。1つの問題を除いて、正常に動作しています。

1 つのドロップダウンからアイテムを選択すると、他の 2 つのドロップダウンで無効になりますが、最初のドロップダウンから別のアイテムを再度選択すると、このアイテムは無効になりますが、以前に選択したアイテムも無効になります。

新しいオプションが無効になっている場合は、以前に選択したものを有効にする必要があります。

コードは次のとおりです。

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select3" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

JavaScript コードは次のとおりです。

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
});

デモリンク: http://jsfiddle.net/x4E5Q/137/

4

1 に答える 1

3

jsフィドル

focus イベントと change イベントを組み合わせて、目的を達成します。

JavaScript 

$(document).ready(function () {
    var previous;

    $("select").focus(function () {
        // Store the current value on focus and on change
        previous = this.value;
    }).change(function () {
        // Do something with the previous value after the change

        $("select").not(this).find("option[value=" + previous + "]").prop('disabled', false);
        $("select").not(this).find("option[value=" + $(this).val() + "]").prop('disabled', true);
        // Make sure the previous value is updated
        previous = this.value;
    });
});
于 2013-06-12T05:05:02.813 に答える