1

我想要一个下拉菜单，用户可以在其中从几个预定义的选项中进行选择，但我也想给他插入用户特定值的选项，我在想有一个选项，"user specific"这反过来又允许用户当用户选择"user specific"选项时，在出现或可编辑的文本框中插入用户特定条目。任何人有任何想法我可以如何实现这是 HTML 和 Javascript？

谢谢你

4

5 回答 5

3

将一个onchange事件附加到选择，当他选择“自定义”或类似的东西时，input在选择下方显示一些。这个输入最初应该是隐藏的（css display:none）。当用户选择“自定义”时，请制作它display:inline。

于 2010-05-24T09:09:05.920 回答
1

Jukka 写了一篇关于如何创建类似组合框的效果的文章。我只是略读了一下，但它看起来很容易理解，而且他的内容通常质量很高。

于 2010-05-24T09:08:24.027 回答
1

你可以这样做：

<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>
于 2010-05-24T09:10:37.393 回答
1

见这里：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;
        }
    }
}); ​
于 2010-05-24T09:16:31.580 回答
0

以下代码将有助于解决您的问题。

<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>
于 2010-05-24T09:17:23.390 回答