Как мне вставить опцию, которая может принимать пользовательский ввод как текст - PullRequest
Новая
       6

Как мне вставить опцию, которая может принимать пользовательский ввод как текст

0 голосов
/ 02 июня 2018

Это особенно элементарно, я новичок и недавно получил помощь от очень доброго и искреннего человека, который привел меня туда, где я сейчас нахожусь.

Я хочу дать пользователю возможность выбрать один из предложенных вариантов или вставить свою собственную информацию.

Вот что я получил: 

<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 онеделю назад и знаю самые основы, но я учусь ...

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Вы можете захотеть иметь поле ввода сразу после поля выбора, которое включено / отключено, в зависимости от того, является ли выбранный параметр «вашим местоположением» (это должно быть последним параметром): 

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

Надеюсь, это поможет

0 голосов
/ 02 июня 2018

Кажется, вы ищете datalist.Пожалуйста, посмотрите на этот ответ .

...