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 に答える