单击 Select2 选项时重定向 URL

Posted 2023-05-07

【中文标题】单击 Select2 选项时重定向 URL

【英文标题】：redirect URL when Select2 option clicked

【发布时间】：2020-10-28 16:07:11

【问题描述】：

我有一个选择菜单，用户可以在其中过滤作业。我想添加一个“列出所有”选项，它应该只是将它们重定向到索引页面，因为它列出了所有内容。但我不能这样做，因为我正在使用

onchange="form.submit()"

如果我将“index.php”放在这样的值中，这就是我得到的结果：

<option value="index.php">list all</option>

mypage/index.php?slct=index.php

但我应该得到这个：

mypage/index.php

试图将值留空，但这在实时服务器上不起作用：

index.php?slct=

我应该怎么做？我正在使用 select2 js，而 <a href> 不适用于它。

【问题讨论】：

这能回答你的问题吗？ Click event in select2 tag with a link

jsfiddle.net/jogaco/0h8tc6Lj

***.com/q/15636302/104380

jsbin.com/kevutavuke/1/edit?html,js,output

2 分钟的 Google 搜索为我提供了可能对您有所帮助的上述信息。

【参考方案1】：

在阅读 the docs 后，我设法破解了一个可行的演示

var data = [
  
      "id": "1",
      "text": "See all",
      "url": "https://google.com"
  ,
  
      "id": "2",
      "text": "option 2"
  ,
  
      "id": "3",
      "text": "option 3"
  
];

$("select").select2(
   placeholder: 'please choose',
   data: data
);

$("select").on('select2:select', function(e)
   if( e.params.data.url )
        window.location = e.params.data.url;
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet"/>
<select style="width: 50%">
  <option></option>
</select>

empty option 用于显示占位符

【讨论】：

我从字面上复制粘贴你的代码，它在小提琴上工作，但在我的本地主机上没有做任何事情。我选择了“查看全部”选项，但没有任何反应。

在select2:select回调中放置一个console.log(e.params.data)，看看当你选择它时发生了什么

还要确保在您的<select> 元素中有一个空的<option></option>，因此默认情况下不会选择第一个选项。如果是，您将无法点击它，因为它已被选中

我在<select> 中有一个onchange="form.submit();"，如果我不删除它，它甚至不会记录。删除后（但我需要它，所以我无法删除。），我在控制台中得到了这个，但仍然没有加载新页面 imgur.com/EIWlu6t

我在屏幕截图中没有看到url 属性，所以它当然不起作用。没有它怎么可能工作？你为什么不像我的回答那样设置url 属性？这一切都基于此