How do I href this list / options?

Question

#episode-list {
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid #69c773;
  box-shadow: 0 2px 10px rgba(0,0,0,.8)
}

input {
  width: 100%;
  padding: .5em;
  font-size: 1.2em;
  border-radius: 3px;
  border: 1px solid #d9d9d9
}

<div id="episode-list">
  <input type="text" id="default" list="episodes" placeholder="Episodes">
  <datalist id="episodes">
      <option value="HTML">S1 E1</option>
      <option value="CSS">S1 E2</option>
      <option value="JavaScript"></option>
      <option value="Java"></option>
      <option value="Ruby"></option>
      <option value="PHP"></option>
      <option value="Go"></option>
      <option value="Erlang"></option>
      <option value="Python"></option>
      <option value="C"></option>
  </datalist>
</div>

How do href this?

Someone please help me.

Like I wanna make it so if someone clicks on the options they get linked to a URI / URL

Thanks in advance

no idea what you want to do here. doing and `href` is HTML 101 stuff. — Funk Forty Niner, Dec 25 '16 at 04:17
this site requires a minimum of some text and i just posted "ignore this" to increase the word count — LiveChief, Dec 25 '16 at 04:17
how do i href the options so if they click on any of them i can link it to another URI — LiveChief, Dec 25 '16 at 04:18
See https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms Also there are reasons the site has the limits it has. The question makes little sense as is. — chris85, Dec 25 '16 at 04:21
Please check this link:-http://stackoverflow.com/questions/2000656/using-href-links-inside-option-tag — Razia sultana, Dec 25 '16 at 04:30

score 0 · Answer 1 · edited May 23 '17 at 12:32

Try this:

<select id="episodes" onchange="location = this.value;"> <!-- when an option is selected, redirect to the value !--> 
    <option value="./location1.php">Location1</option> <!-- change values to what is required !-->
    <option value="./location2.php">Location2</option>
    <option value="./location3.php">Location3</option>
</select>

Reference: using href links inside <option> tag. Be sure to give the original guy's idea an upvote :)

score -1 · Answer 2 · answered Dec 25 '16 at 04:24

use select instead of input like this

<select id="default" multiple="true"  style="width:400px;" >
   <div id="txtHint"> 
   <option value="HTML">S1 E1</option>
        <option value="CSS">S1 E2</option>
        <option value="JavaScript"></option>
        <option value="Java"></option>
        <option value="Ruby"></option>
        <option value="PHP"></option>
        <option value="Go"></option>
        <option value="Erlang"></option>
        <option value="Python"></option>
        <option value="C"></option>
  </div>
</select><br/>

and then these script file in

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>

now write this:

<script>
$(document).ready(function(){
    $("#default").chosen();
});
</script>

how is this used for href? – LiveChief Dec 25 '16 at 04:46 — LiveChief, Dec 25 '16 at 04:46

How do I href this list / options?

2 Answers2