jQuery的刪除基於另一個SELECT選項中選擇選擇（需要對所有的瀏覽器支持）

Question

說我有這個下拉菜單：

<select id="theOptions1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

我想它，以便當用戶選擇1，這是事物的用戶可以選擇下拉2：

<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

，或者如果用戶選擇2：

<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
</select> 

，或者如果用戶塞萊CTS 3：

<select id="theOptions2"> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

我想這裏的代碼發佈： jQuery disable SELECT options based on Radio selected (Need support for all browsers)

但它並不適用於選擇工作。

請幫忙！ 謝謝！

更新： 我真的很喜歡這個答案保羅Bergantino對： jQuery disable SELECT options based on Radio selected (Need support for all browsers)

反正是有修改此與選擇，而不是單選按鈕的工作？

jQuery.fn.filterOn = function(radio, values) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      options.push({value: $(this).val(), text: $(this).text()}); 
     }); 
     $(select).data('options', options); 
     $(radio).click(function() { 
      var options = $(select).empty().data('options'); 
      var haystack = values[$(this).attr('id')]; 
      $.each(options, function(i) { 
       var option = options[i]; 
       if($.inArray(option.value, haystack) !== -1) { 
        $(select).append(
        $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

Answer 1

這個工程（在Safari 4.0.1，FF 3.0.13測試）：

$(document).ready(function() { 
    //copy the second select, so we can easily reset it 
    var selectClone = $('#theOptions2').clone(); 
    $('#theOptions1').change(function() { 
     var val = parseInt($(this).val()); 
     //reset the second select on each change 
     $('#theOptions2').html(selectClone.html()) 
     switch(val) { 
      //if 2 is selected remove C 
      case 2 : $('#theOptions2').find('option:contains(c)').remove();break; 
      //if 3 is selected remove A 
      case 3 : $('#theOptions2').find('option:contains(a)').remove();break; 
     } 
    }); 
}); 

和美麗的UI：

<select id="theOptions1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

Answer 2

在Internet Explorer的選擇列表中記錄can NOT remove options。

Answer 3

您可以添加類到您<option> s到其存儲去的#theOptions1每個值：

<select id="theOptions2"> 
    <option value="a" class="option-1 option-2">a</option> 
    <option value="b" class="option-1 option-2 option-3">b</option> 
    <option value="c" class="option-1 option-3">c</option> 
</select> 

然後做到這一點：

$(function() { 
    var allOptions = $('#theOptions2 option').clone(); 
    $('#theOptions1').change(function() { 
     var val = $(this).val(); 
     $('#theOptions2').html(allOptions.filter('.option-' + val)); 
    }); 
}); 

Answer 4

實際上，使用下面的代碼，只要它不是所選的選項將刪除一個下拉選項就好在IE中，（它不會對「一」不首先取消選擇該選項工作）：

var dropDownField = $('#theOptions2'); 
dropDownField.children('option:contains("b")').remove(); 

你只要運行這個刪除要與第一組（theOptions1）在條件語句來消除任何選項 - 如果選擇了其中的一個，你運行這些行：

var dropDownField = $('#theOptions2'); 
if ($('#theOptions1').val() == "2") { 
    dropDownField.children('option:contains("c")').remove(); 
} 
if ($('#theOptions1').val() == "3") { 
    $("#theOptions2 :selected").removeAttr("selected"); 
    $('#theOptions2').val('b'); 
    dropDownField.children('option:contains("a")').remove(); 
} 

- 湯姆

Answer 5

試試這個。這肯定會工作

 $(document).ready(function() { 
 

 
    var oldValue; 
 
    var oldText; 
 
    var className = '.ddl'; 
 

 
    $(className) 
 
       .focus(function() { 
 
        oldValue = this.value; 
 
        oldText = $(this).find('option:selected').text(); 
 
       }) 
 
       .change(function() { 
 
        var newSelectedValue = $(this).val(); 
 
        if (newSelectedValue != "") { 
 
         $('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove(); 
 
        } 
 
        if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST 
 
         $(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>'); 
 
        } 
 
        $(this).blur(); 
 
       }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<form action="/Home/Ex2" method="post"> 
 
    <select class="ddl" id="A1" name="A1"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A2" name="A2"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A3" name="A3"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A4" name="A4"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <input type="submit" name="submit" value="Save Data" id="btnSubmit" /> 
 
</form>