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

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

1 голос
/ 24 мая 2010

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

спасибо

Ответы [ 5 ]

3 голосов
/ 24 мая 2010

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

1 голос
/ 24 мая 2010

Смотрите здесь: 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;
        }
    }
}); ​
1 голос
/ 24 мая 2010

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

<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>
1 голос
/ 24 мая 2010

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

0 голосов
/ 24 мая 2010

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

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