redirect URL when Select2 option clicked

Question

I have a select menu where users can filter jobs. I wanted to add a "list all" option, that should just redirect them to the index page, because that lists everything. But I can't do that because I'm using

onchange="form.submit()"

and this is the result I get if I put "index.php" in the value like this:

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

mypage/index.php?slct=index.php

but I should get this:

mypage/index.php

Tried to leave the value empty, but that doesn't work on live server:

index.php?slct=

How should I do this? I'm using select2 js and the <a href> doesn't work with that.

Does this answer your question? [Click event in select2 tag with a link](https://stackoverflow.com/questions/21349399/click-event-in-select2-tag-with-a-link) — vsync, Jul 08 '20 at 09:28
2-minutes Google-search provided me with the above information that may help you. — vsync, Jul 08 '20 at 09:33
Yes it really does, but all of these uses + words to put the links to. Is it possible to add the link to the "google" itself or I must add a "preview" word to it? https://jsbin.com/kevutavuke/1/edit?html,js,output — admin, Jul 08 '20 at 09:34
I don't understand why you've said *"`` doesn't work"* what does this mean "not work" means? in what why is it not working? you shown in your code that you don't have an href link in your option... so how can it work if you don't even have a link? — vsync, Jul 08 '20 at 09:36
I've tried with href but that didn't show up, that's why I thought it didn't work. Now I can see it does, but do I need to add another word to it? — admin, Jul 08 '20 at 09:37
Tried all of the links but none of them did anything. Nothing's changed. — admin, Jul 08 '20 at 10:00

vsync · Answer 1 · 2020-07-09T11:26:04.867

0

I've manged to hack a workable demo after reading 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 is used for the placeholder to be shown

edited Jul 09 '20 at 11:26

answered Jul 08 '20 at 09:43

vsync

118,978
58
307
400

I literally copy-paste your code, and it's working on fiddle, but not doing anything on my localhost. I select the 'see all' option and nothing happens. – admin Jul 08 '20 at 16:58
place a `console.log(e.params.data)` in the `select2:select` callback and see what's going on when you select it – vsync Jul 08 '20 at 19:34
Also make sure to have an empty `` inside your ` – vsync Jul 08 '20 at 19:35
I have a ```onchange="form.submit();"``` in ``` – admin Jul 09 '20 at 08:45
I don't see `url` property in the screenshot so of course it wouldn't work. how can it work without it? why didn't you set `url` property like in my answer? it's all based around that – vsync Jul 09 '20 at 10:23
I copy pasted your code. There is the ```"url": "https://google.com"``` – admin Jul 09 '20 at 10:35
There is no `url` in the screenshot you places in the comment some 2 hours ago.. – vsync Jul 09 '20 at 11:25

redirect URL when Select2 option clicked

1 Answers1