如何插入可以将用户输入作为文本的选项

Question

这是特别基本的，我是一个初学者，最近得到了一位非常善良和真诚的人的帮助，他让我达到了现在的水平。

我想让用户选择提供的选项之一或插入他们自己的信息。

这是我到目前为止所得到的：

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

现在，我正在尝试允许用户输入他们自己的文本（对应于地址）并将其作为选项之一。

我想在单击选项后显示文本框，但我不知道如何定义值，我想这将是一些 JavaScript 的结果......

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

那么 JavaScript 是什么，我如何使选项的值高于用户输入的值。

如果有人可以提供帮助，我将不胜感激，我大约一周前才开始使用 javascript，并且知道非常基础的知识，但我正在学习......

Answer 1

您似乎正在寻找datalist。请看this answer。

Answer 2

您可能希望在选择框之后有一个输入字段，根据所选选项是否为“您的位置”（应该是最后一个选项）启用/禁用：

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

在你的 javascript 中你需要（我假设你正在使用 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
    }
})

希望对你有帮助