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>