JQuery 脚本在 Chrome 或 Safari 上不起作用答案

【问题标题】：JQuery script not working on Chrome or SafariJQuery 脚本在 Chrome 或 Safari 上不起作用
【发布时间】：2014-09-30 04:48:23
【问题描述】：

以下脚本适用于 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>

【问题讨论】：

标签： javascript jquery google-chrome safari

【解决方案1】：

您的行中有语法错误

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

【讨论】：

感谢您解决了这个问题！它还让我在 .click() 和 .change() 之间进行了一些有趣的讨论。

【解决方案2】：

在你的 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

【讨论】：