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

Question

The following script works on IE and Firefox but I can't seem to figure out the reason why it's not working on Chrome and Safari. The purpose of the script is simply to remove the first 4 options from list "B" if the first option in list "A" is clicked.

Thanks in advance for any feedback!

  $("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

Try this on your 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();
            });
        }     
    });
 });

I tested this code in Chrome

See fiddle here

Answer 2

You have syntax error in line

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

B , instead of part of string value, becomes a variable, placed between two strings without operators. It should be, for example:

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

Also, I changed click event handler from

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

to

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

with checking for selected value inside event handler for proper select changed value handling.

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

And one more thing: instead of $("document") you can write $(document) .