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...

Take care in spelling `JavaScript` properly to avoid search collision with Java. http://javascriptisnotjava.io — Basil Bourque, Jun 03 '18 at 21:50

score 1 · Answer 1 · answered Jun 02 '18 at 18:54

1

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

answered Jun 02 '18 at 18:54

Milore

1,672
1
15
20

Will look into data lists and that answer, thank you. – Skander Lejmi Jun 02 '18 at 19:20

score 1 · Answer 2 · answered Jun 02 '18 at 19:49

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

I have done this and it functioned satisfyingly. Bruno, you are godly. — Skander Lejmi, Jun 02 '18 at 20:13

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

2 Answers2