Drop down box to include a link using windows.open-CodePudding

Need some help with this. I have a drop down list which is part of form but i need only one select to be a link using something that will active once clicked. Not sure is window.open is the correct thing to use.

Here is the code i'm using but at present all select are links and i only need 'other' to be it.

        <select name="model" onchange="window.open(this.value, '_blank')">
        <option value="" selected>Please select</option>
        <option value="A">Apple</option>
        <option value="B">Boom</option>
        <option value="C">chin</option>
        <option value="http://to be a link ">Other..</option>
        </select>

Is this possible to do?

CodePudding user response：

You can try something like this. If the value is an URL you can open a new window.

<select name="model" onchange="this.value.includes('http') && window.open(this.value, '_blank')">
  <option value="" selected>Please select</option>
  <option value="A">Apple</option>
  <option value="B">Boom</option>
  <option value="C">chin</option>
  <option value="http://to be a link ">Other..</option>
</select>

CodePudding user response：

You can try this

I do not recommend using inline event handlers

NOTE: The script will not actually run here from a stacksnippet due to sandboxing

document.querySelector("[name=model]").addEventListener("change", function() {
  const val = this.value;
  if (val.startsWith("http")) {
    console.log("This will open",val)
    window.open(val, "_blank")
  }  
})

<select name="model">
  <option value="" selected>Please select</option>
  <option value="A">Apple</option>
  <option value="B">Boom</option>
  <option value="C">chin</option>
  <option value="https://to be a link ">Other..</option>
</select>