How do I insert an option that can take user input as text

Question

This is particularly basic, I'm a beginner and have recently gotten help from a very kind and sincere man that has gotten me to where I am now.

I want to give the user a choice to either select one of the options provided or insert their own information.

Heres what I've got so far:

<div class=naviselection>
Start:
<select id='start' onchange="updateNavigationLink()">  
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
<option value="Centrum, Den Haag">City Center</option>

</select> End:
<select id='end' onchange="updateNavigationLink()">
<option value="The International School of The Hague, Wijndaelerduin 1, 2554 BX Den Haag">School</option>
 <option value="Centrum, Den Haag">City Center</option>

 </select>

 </div>

 <div class=Finallink>
 <span id="navigationLink"></span>

Now, I'm trying to allow the user to put in their own text (corresponding to an address) and have that be one of the options.

Im thinking of having the text box appear once an option is clicked but I don't know how to define the value, I suppose it would be the result of some JavaScript…

<option value=undefined>Your Location</option>

So what would the JavaScript be, how would I make the value of the option above what my user types in.

If anyone can help it would be very much appreciated, I've just only begun with javascript about a week ago and know the very basics but I'm learning...

Answer 1

It seems you are looking for datalist . Please, take a look at this answer .

Answer 2

You may want to have an input field right after the select box which is enabled/disabled depending on whether the selected option is "your location" (that should be the last option):

<input id="custom-address" disabled />

and in your javascript you need (I'm assuming that you're using jQuery)

$("#start").change(function(){ //the following check will be triggered every time the selected option changes
    if ($('#start')[0].selectedIndex==$('#start').length) { //if the selected option is the last one
        $('#custom-address').prop("disabled", false); //enable the text input
    } else {
        $('#custom-address').prop("disabled", true); //otherwise disable it
    }
})

Hope this helps