jQuery选择选项取消选择

Question

我正在尝试使用 jQuery 取消选择选择选项元素。这是我的场景：

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

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

根据您选择的内容，它会将这些 ":selected" 选项中的值放入一个名为 "url" 的变量中。

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

如果您选择“选择 1”和“选择 2”
url = '搜索/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检查上面的代码示例。关于如何完成此功能的任何想法？如果我没有把我的问题说清楚。请要求更多详细信息，我会添加它们。谢谢 -克里斯-

Answer 1

看起来你给原本应该相当简单的任务增加了很多复杂性。

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

jQuery $.map() 函数非常适合这个例子。试试下面的代码：

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

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

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