Как я могу иметь выпадающий список (выберите HTML), где я хочу иметь один из вариантов, где я разрешаю пользователю вводить указанный пользователем entery?

Я хочу иметь раскрывающееся меню, в котором пользователь может выбрать один из нескольких предопределенных параметров, но я также хочу дать ему возможность вставки определенного пользователем значения, я подумал, что один из вариантов будет "user specific" что, в свою очередь, позволит пользователю вставить указанную пользователем запись в текстовое поле, которое появляется или редактируется, когда пользователь выбирает "user specific" вариант. Кто-нибудь есть какие-либо идеи, как я могу реализовать это HTML и Javascript?

благодарю вас

Источник

5 ответов

Решение

Прикрепить onchange событие для выбора, и когда он выбирает "Custom" или что-то подобное, сделать некоторые input видимый ниже выбора. Этот вход должен быть изначально скрыт (css display:none). Когда пользователь выбирает "пользовательский", сделайте это display:inline,

Источник

Вы можете пойти примерно так:

<select id="myid" onchange="doIt(this);">
  optons...
</select>

<script type="text/javascript">
function doIt(field) {
if (field.value === 'user specific')
{
  var tbox = document.createElement('input');
  tbox.setAttribute('type', 'text');
  document.form_name.appendChild(tbox);
}
}
</script>
Источник

Юкка написал статью о том, как создать комбо-подобный эффект. Я только просмотрел его, но он выглядит доступным, и его содержание обычно очень высокого качества.

Источник

Смотрите здесь: http://jsfiddle.net/EscRV/

HTML

<select id="mySelect">
   <option>value 1</option>
   <option value="[new]">new</option>
</select>

JS

// get a cross-browser function for adding events, place this in [global] or somewhere you can access it
var on = (function(){
    if (window.addEventListener) {
        return function(target, type, listener){
            target.addEventListener(type, listener, false);
        };
    }
    else {
        return function(object, sEvent, fpNotify){
            object.attachEvent("on" + sEvent, fpNotify);
        };
    }
}());

var mySelect = document.getElementById("mySelect");    
on(mySelect, "change", function(){
    if (this.value === "[new]") {
        var newOptionName = prompt("input new option");
        if (newOptionName){
            mySelect.options[mySelect.options.length] = new Option(newOptionName);
            this.value= newOptionName;
        }
    }
}); ​
Источник

Следующий код поможет решить вашу проблему.

<html>
<head></head>
<body>

<select id="sbox">
<option value="1" onclick="hideUserOption();">First option</option>
<option value="2" onclick="hideUserOption();">second option</option>
<option value="3" onclick="showUserOption();">User Specific</option>
</select>
<div id="userOptions" style="display:none">
<input type="text" />
<input type="submit" value="Save"/>
</div>
<script type="text/javascript">

    function showUserOption() {
        var userOptions = document.getElementById("userOptions");
        userOptions.style.display = "block";
    }

    function hideUserOption() {
        var userOptions = document.getElementById("userOptions");
        userOptions.style.display = "none";
    }


</script>
</body>



</html>
Источник
Другие вопросы по тегам