Question

我试图用jQuery取消选择一个select选项元素。这是我的情景：

我有3个选择选项：
[选择1]
[选择2]
[选择3]

场景：选择1预先填充了来自ajax调用的数据。所以选择1有opt 1，opt 2，opt 3等。
当您从选择1中选择一个选项时，它会用数据填充选择2，当您从选择2中选择时，它会填充选择3，依此类推。

根据您选择的内容，它会放置那些“：selected”选项中的值，并应用于名为“url”的变量。

因此，如果您只选择“选择1”：
url ='search / for / this / select1 /'

如果您选择“选择1”和“选择2”
url ='search / for / this / select1 / select2 /

等等。

这是我编写jQuery代码的方式：

var url = 'search/for/this';  
if(element1.is(':selected')) {
  url += element1.val();    
  // makes url = 'search/for/this/select1val/';  
     if(element2.is(':selected')) {  
        url += element1.val();    
         // makes url = 'search/for/this/select1val/select2val/';  
        if(element3.is(':selected')) {  
            url += element1.val();    
            // makes url = 'search/for/this/selectval1/select2val/select3val/';  

         }  
    }  
}

问题是，这要求我在选择上一个选项后取消选择下一个选项，但由于有数据已填入，当它通过“：selected”条件时似乎自动返回true检查上面的代码示例。有关如何完成此功能的任何想法？如果我不明白我的问题。请索取更多详细信息，我会将其添加进去。谢谢 -Chris -

Answer 1

看起来你正在为这应该是一个相当简单的任务添加很多复杂性。

正如您所描述的那样，您希望从下拉列表中获取所有选定值的值，并将它们连接到一个URL中。

jQuery $.map()函数非常适合此示例。请尝试以下代码：

var searchTerms = $('option:selected').map(function() {
  return $(this).val();
}).get().join('/');

url = 'search/for/this/' + searchTerms;

然后，当您需要实际获取所选值时（例如，当您提交搜索时），您将执行此代码。您可能还希望获取选项的文本而不是实际值，在这种情况下代码将更改为return $(this).text();

jQuery选择选项取消选择

1 个答案: