Question

所以我编写了一些在页面加载时运行的代码，代码的目标是从特定的下拉菜单中获取所有项目，将这些项目存储在一个数组中，然后逐个将这些项目从数组中添加回按照自定义顺序下拉菜单。

这是我的问题，在这个特定的页面上有7个下拉菜单，在页面加载时它正在做它应该做的事情，它正在完美地定制订单。根据用户的选择，它会过滤另一个下拉列表。问题是我正在抓取基于has(option:contains())的下拉对象，这是问题所在，因为正在过滤的下拉菜单正在使用我抓取的关键字来抓取该对象。

例如：

我的下拉菜单包含：

纽约

阿拉巴马

德克萨斯

用户选择纽约

过滤后的下拉列表将被过滤为：

纽约 - 购物

纽约 - 夜生活

纽约 - 体育

问题是，因为我使用的是has(option:contains())并使用New York，所以提交时，两个下拉列表都会被重新过滤并导致问题...

这是我的代码：

        var select = $('select:has(option:contains(New York))');
        var options = select.find("option");

        //assigning drop down list items to new variable
        var OptionObj1 = $('select option:contains("None")');
        var OptionObj2 = $('select option:contains("New York")');
        var OptionObj3 = $('select option:contains("Texas")');
        var OptionObj4 = $('select option:contains("Alabama")');
        var OptionObj5 = $('select option:contains("Colorado")');

        //clearing drop down list
        select.empty();

        //adding new items from array into drop down list
        select.append(OptionObj1 [0]);
        select.append(OptionObj2 [0]);
        select.append(OptionObj3 [0]);
        select.append(OptionObj4 [0]);
        select.append(OptionObj5 [0]);

我在这里说了很多，有些可能没有意义，所以如果有什么需要澄清，请告诉我。

我认为问题是var select = $('select:has(option:contains(New York))'); ......但我不确定......

Answer 1

为什么不使用它来读取下拉值？

var val1 = $('select.class1').val();
var val2 = $('select.class2').val();

我认为你不会确定下拉列表中的值是什么。

Answer 2

<强>编辑：

您可以选择id或class，以便我们分开选择

$('#select1').on('change', function() {
    var sel = obj[$(this).val()];
    $('#select2').empty();
    for(var i = 0; i < sel.length; i++) {
        $('#select2').append($('<option/>').val(sel[i]).text(sel[i]));
    }
});

obj是一个包含第二个下拉列表信息的对象：

var obj = {
    "New York": [
        "New York - Shopping",
        "New York - Nightlife",
        "New York - Sports"
    ],
    "Alabama": [
        "Alabama - Shopping",
        "Alabama - Nightlife",
        "Alabama - Sports"
    ],
    "Texas": [
        "Texas - Shopping",
        "Texas - Nightlife",
        "Texas- Sports"
    ]
};

然后，当点击按钮时，您只需要获取第二个下拉列表的值：

$('#btn').on('click', function() {
    alert($('#select2').val());
});

jsfiddle DEMO

JavaScript页面加载问题

2 个答案: