单击 Select2 选项时重定向 URL

Question

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

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> 不适用于它。

Answer 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 用于显示占位符