JavaScript 页面加载问题

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

我认为这样你就无法确定下拉菜单中的值是什么..