Javascript jQuery基于另一个选择删除选择选项（需要支持所有浏览器）

假设我有这个下拉列表：

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

1.
2.
3.

我希望这样，当用户选择1时，这是用户可以为下拉列表2选择的内容：

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

A.
B
C

或者，如果用户选择2：

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

A.
B

或者，如果用户选择3：

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

B
C

我尝试了这里发布的代码：

但它对选择不起作用

请帮忙！ 谢谢大家!

更新： 我很喜欢保罗·贝甘蒂诺的回答：

是否要修改此选项以使用选择而不是单选按钮

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)
                    );
                }
            });
        });            
    });
};

jQuery.fn.filterOn=函数（收音机，值）{
返回此值。每个（函数（）{
var选择=这个；
var期权=[]；
$（选择）.find（'option'）.each（函数（）{
push（{value:$（this.val（），text:$（this.text（）}）；
});
$（选择）.data（'options'，options）；
$（收音机）。单击（函数（）{
变量选项=$（选择）.empty（）.data（'options'）；
var haystack=value[$（this）.attr（'id'）；
$。每个（选项、功能（i）{
var期权=期权[i]；
如果（$.inArray（option.value，haystack）！=-1）{
$（选择）。附加(
$（''）.text（option.text）.val（option.value）
);
}
});
});            
});
};

用于您在Internet Explorer的选择列表中的记录。

此功能有效（在Safari 4.0.1、FF 3.0.13中测试）：

还有漂亮的用户界面：

<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>

1.
2.
3.


A.
B
C

您可以将类添加到

中，以存储与

选项1的每个值相关的类：

<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>

实际上，使用下面的代码可以删除IE中的下拉选项，只要它不是所选的选项（如果不先取消选择该选项，它将无法在“a”上工作）：

您只需运行此命令即可删除第一个组（选项1）的条件语句下要删除的任何选项，即如果选择了其中一个，则运行以下行：

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();
}

-汤姆试试这个。这肯定会奏效的


$（文档）.ready（函数（）{
风险价值；
var-oldText；
var className='.ddl'；
$（类名）
.focus（函数（）{
oldValue=此.value；
oldText=$（this）.find（'option:selected'）.text（）；
})
.改变（功能）{
var newSelectedValue=$（this.val（）；
如果（newSelectedValue！=“”）{
$（'.ddl'）.not（this）.find（'option[value=“”+newSelectedValue+'“]）.remove（）；
}
if（$（className）.not（this）.find（'option[value=“'+oldValue+'''']”）。length==0）{//不存在
$（className）.not（this）.append（“”+oldText+“”）；
}
$（this.blur（）；
});
});

挑选
A.
B
C
D

挑选
A.
B
C
D

挑选
A.
B
C
D

挑选
A.
B
C
D

我想他的意思是移除而不是禁用。哦，天哪，会飞的意大利面怪物！这是一个网址缩短器！我更喜欢这个。只是一个小小的更正-应该是：$（“#theOptions2'）.html（…非常流畅。修改了表示代码，但总而言之，非常易于扩展。
$(function() {
    var allOptions = $('#theOptions2 option').clone();
    $('#theOptions1').change(function() {
        var val = $(this).val();
        $('#theOptions2').html(allOptions.filter('.option-' + val));
    });
});

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

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();
}