2017-04-09 16 views
0

選択にdupplicatesを持たない場合はどうすればよいですか? select1 = subject1の場合、select2とselect3オプション= subject1を無効にし、select1 = subject1、select2 = subject2、select3オプションsubject1とsubject2を無効にする必要があります。悪い英語のため申し訳ありません;。。あなたが行く。ここ(jqueryは、別の選択でこのオプションを選択した場合、selectのオプションを無効にします。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Document</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t <script> 
 
\t \t $('document').ready(function() { 
 
\t \t \t $('select.remRep').on('change', function() { 
 
\t \t \t \t var index1 = $(this).val(); 
 
\t \t \t \t \t \t \t $.each($('select.remRep option'), function() { 
 
\t \t \t \t \t \t \t $(this).removeAttr('disabled'); 
 
\t \t \t \t \t \t \t }); \t 
 
\t \t \t \t switch (index1) { 
 
\t \t \t \t \t case "1" : 
 
\t \t \t \t \t \t $('select.remRep option[value="1"]').attr('disabled','disabled') 
 
\t \t \t \t \t break; 
 
\t \t \t \t \t case "2" : 
 
\t \t \t \t \t \t $('select.remRep option[value="2"]').attr('disabled','disabled') 
 
\t \t \t \t \t break; 
 
\t \t \t \t \t case "3" : 
 
\t \t \t \t \t \t $('select.remRep option[value="3"]').attr('disabled','disabled') 
 
\t \t \t \t \t break; 
 
      case "4" : 
 
\t \t \t \t \t \t $('select.remRep option[value="4"]').attr('disabled','disabled') 
 
\t \t \t \t \t break; 
 
      case "5" : 
 
\t \t \t \t \t \t $('select.remRep option[value="5"]').attr('disabled','disabled') 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <select id="sel1" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
</select> 
 
<select id="sel2" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
    <option value="4">Subject4</option> 
 
    <option value="5">Subject5</option> 
 
</select> 
 
<select id="sel3" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
    <option value="4">Subject4</option> 
 
    <option value="5">Subject5</option> 
 
</select> 
 
</body> 
 
</html>

答えて

0

これは、すべてのオプションではなく、現在の1を更新し

$('document').ready(function() { 
 

 
    // put in yopur global scope. 
 
    var previous; 
 
    
 
    // add previous/current value in previous var when input in focus 
 
    $('select.remRep').on('focus', function() { 
 
    previous = this.value; 
 
    
 
    // when the input detects a change 
 
    }).on('change', function() { 
 
    var t = $(this); 
 
    
 
    //update the previous value to be enabled 
 
    $('option[value=' + previous + ']').removeAttr('disabled'); 
 
    
 
    // disable new value in other inputs 
 
    $('option[value=' + t.val() + ']').not(t).attr('disabled', true); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="sel1" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
</select> 
 
<select id="sel2" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
    <option value="4">Subject4</option> 
 
    <option value="5">Subject5</option> 
 
</select> 
 
<select id="sel3" class="remRep"> 
 
\t \t <option value="0">none</option> 
 
    <option value="1">Subject1</option> 
 
    <option value="2">Subject2</option> 
 
    <option value="3">Subject3</option> 
 
    <option value="4">Subject4</option> 
 
    <option value="5">Subject5</option> 
 
</select>

+0

申し訳ありませんが、大きなは、私は今それに取り組んでいました。 – JohnV

+0

アップデートを参照してください。意図したとおりに動作します。 – JohnV

+0

ありがとうございました! – Zeng

0

2があります。これを実現する方法:

$('#s1').find('option').eq(0).attr('disabled', true); 
$('#s1 option[value="1"]').attr('disabled', true); 

Working Fiddle

注:attr()で使用attr('disabled', 'true/false');

+0

ありがとう! – Zeng

関連する問題