HTML Select Menu

Question

I was hoping for some help with a select menu. My hope is to link the select menu items to URLs and have them open a new tab/window via the target="_blank" attribute.

Currently my code looks like this:

<form action="">
<select  onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option value="">~ Please Select a Website from the List Below ~</option>
<option value="https://anysite01.com" target="_blank">LINK 1</option>
<option value="https://anysite02.com" target="_blank">LINK 2</option>
<option value="https://anysite03.com" target="_blank">LINK 3</option>
</select>
</form>

My problem is that I do not want the first option (~ Please Select a Website from the List Below ~) to link to anything. It still needs to be in the dropdown menu though. Is there a way to do this? One more thing. I'm not opposed to using onClick.

Thank you!

Possible duplicate of [How do I make a placeholder for a 'select' box?](https://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box) — PRMoureu, Sep 08 '17 at 18:24
I don't think so because the select list I'm hoping for needs to link to outside URLs. — Lewisandclark 200, Sep 08 '17 at 22:22

score 0 · Answer 1 · answered Sep 08 '17 at 18:24

0

Just change the first option to this to disable clicking on it:

<option value="" disabled selected>>~ Please Select a Website from the List Below ~</option>

answered Sep 08 '17 at 18:24

sham

1,214
10
16

score 0 · Answer 2 · answered Sep 08 '17 at 18:29

In your case, you should use something else as a select menu, because the <select> tag is not meant to achieve what you are asking. :)

Take a look at the Bootstrap plugin's drop-downs. You can achieve what you want by creating a drop down with links in it. Like so :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ~ Please Select a Website from the List Below ~
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="http://www.google.com" target="_blank">Google</a>
    <a class="dropdown-item" href="http://www.yahoo.com" target="_blank">Yahoo</a>
  </div>
</div>

You can run the code above to how it would look (out-of-the-box).

score 0 · Answer 3 · answered Sep 08 '17 at 18:29

<form action="">
  <select  onchange="window.open(this.options[this.selectedIndex].value,'_blank')">
    <option value="" disabled>~ Please Select a Website from the List Below ~</option>
    <option value="https://anysite01.com" target="_blank">LINK 1</option>
    <option value="https://anysite02.com" target="_blank">LINK 2</option>
    <option value="https://anysite03.com" target="_blank">LINK 3</option>
  </select>
</form>

The disabled attribute is a boolean attribute.

When present, it specifies that an option should be disabled.

A disabled option is unusable and un-clickable.

The disabled attribute can be set to keep a user from selecting the option until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript is required to remove the disabled value, and make the option selectable.

Luke · Accepted Answer · 2017-09-08T19:03:48.457

This can be solved with a little bit of jQuery.

Change your html to:

<select id="selectList">
  <option value="0">~ Please Select a Website from the List Below ~</option>
  <option value="1" data-link="https://anysite01.com">LINK 1</option>
  <option value="2" data-link="https://anysite02.com">LINK 2</option>
  <option value="3" data-link="https://anysite03.com">LINK 3</option>
</select>

and add a function to respond to the changing value (using JQuery):

$('#selectList').change(function() {
      if ($(this).val() != 0) {
        var link = $('#selectList option:selected').data('link');
        window.open(link);
      };
});

Hope this helps. Tested in JSFiddle with an alert so the redirected should work in this way.

HTML Select Menu

4 Answers4