Question

以下脚本适用于IE和Firefox，但我似乎无法弄清楚它不适用于Chrome和Safari的原因。如果单击列表“A”中的第一个选项，脚本的目的只是从列表“B”中删除前4个选项。

提前感谢您的任何反馈！

 $("document").ready(function () {
     $('select[name="A"] option[value="001"]').click(function () {
         var vList = ["001", "002", "003", "004"];
         $.each(vList, function (i, code) {
             $("select[name="B"] option[value=" + vList[i] + "]").remove();
         });
     });
 });

<select name="A" value="">
    <option value=""></option>
    <option value="001">1 RED CATEGORY</option>
    <option value="002">2 BLUE CATEGORY</option>
    <option value="003">3 GREEN CATEGORY</option>
    <option value="004">4 YELLOW CATEGORY</option>
    <option value="005">5 BLACK CATEGORY</option>
</select>


<select name="B" value="">
    <option value=""></option>
    <option value="001">1 - RED</option>
    <option value="002">2 - RED</option>
    <option value="003">3 - RED</option>
    <option value="004">4 - RED</option>
    <option value="005">1 - BLUE</option>
    <option value="006">2 - BLUE</option>
    <option value="007">3 - BLUE</option>
    <option value="008">4 - BLUE</option>
    <option value="009">1 - GREEN</option>
    <option value="010">2 - GREEN</option>
    <option value="011">3 - GREEN</option>
    <option value="012">4 - GREEN</option>
    <option value="013">1 - YELLOW</option>
    <option value="014">2 - YELLOW</option>
    <option value="015">3 - YELLOW</option>
    <option value="016">4 - YELLOW</option>
    <option value="017">1 - BLACK</option>
    <option value="018">2 - BLACK</option>
    <option value="019">3 - BLACK</option>
    <option value="020">4 - BLACK</option>
</select>

Answer 1

在jQuery上试试这个：

$(document).ready(function () {
    $('select[name="A"]').change(function(){
        if($(this).val() === '001'){
            var vList = ["001", "002", "003", "004"];
            $.each(vList, function(i, code){
                $('select[name="B"] option[value="' + code + '"]').remove();
            });
        }     
    });
 });

我在Chrome中测试了此代码

请参阅小提琴here

Answer 2

您的行语法错误

$("select[name="B"] option[value=" + vList[i] + "]").remove();

B，而不是字符串值的一部分，变成一个变量，放在两个没有运算符的字符串之间。它应该是，例如：

$("select[name='B'] option[value=" + vList[i] + "]").remove();

另外，我从

更改了click事件处理程序

$('select[name="A"] option[value="001"]').click

到

$('select[name="A"]').change

检查事件处理程序中的选定值，以便正确select更改值处理。

Updated fiddle

$(document).ready(function()
{
    $('select[name="A"]').change(function()
    {
        var selected = $(this).val();
        if (selected == '001')
        {
            var vList = ["001", "002", "003", "004"];
            $.each(vList, function(i, code)
            {
                $("select[name='B'] option[value=" + vList[i] + "]").remove();
             });
        }
     });
});

还有一件事：代替$("document")，你可以写$(document)。

JQuery脚本无法在Chrome或Safari上运行

2 个答案: