-1

JavaScript の使用 (jQuery ライブラリーなし)

私がやりたいのは、入力ボックスに値を入力してエンターキーを押したとき(テキストボックスのみ)、入力ボックスの値をドロップダウンボックスに追加したいということです。

既存のドロップダウン ボックスに既存の値がある場合は、既存の値の下に次の値を追加する必要があることに注意してください。

これを設定するにはどうすればよいですか？

htmlのセットアップは次のとおりです。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text" id="theinput" style="width: 100px;">

<select id="thebox" style="width: 100px;"></select>

</body>

</html>
4

2 に答える 2

1

まず、ユーザーがキーを押したときに起動されるイベントリスナーを追加しましょう

2番目-ユーザー入力を取得したい要素を渡す関数を作成し、ドキュメントに値を設定しましょう

3 番目- dom 要素を作成し、作成したout 要素に追加しましょう。

<script>
    //your input element
    var in = document.getElementById("theinput");
    //step 2
    function addItem(e) {
      //check if user press Enter
        if (e.keycode == 13) {            
            var out = document.getElementById("thebox");

            //step 3
            var optionElement = document.createElement("option"); //will create al <option> tag
            var text = document.createTextNode(in .value); //the value you inserted
            optionElement.appendChild(optionElement); // add the text to <option>
            out.appendChild(optionElement); // add the option to <select>
        }
    }
//Step 1 - add Eventlistener
  in.addEventListener("keydown", addItem, false);
</script>

Obs .: テストしないでください。必要な調整を行います。

于 2013-01-24T17:16:32.980 に答える
0 
<html>
<head>
<script>
function displayResult(event)
{
if(event.keyCode == 13)
{
var x=document.getElementById("thebox");
var option=document.createElement("option");
var txtv=document.getElementById("theinput");
option.text=txtv.value;
try
  {
  // for IE earlier than version 8
  x.add(option,x.options[null]);
  }
catch (e)
  {
  x.add(option,null);
  }
}
}

</script>
</head>
<body>
<form>
<select id="thebox">
</select>
</form>
<br>
<input type="text" id="theinput" onkeyup="displayResult(event)"/>
</body>
</html>

jsFiddle のリンクhttp://jsfiddle.net/RYh7U/49/

于 2013-01-24T17:33:27.427 に答える