-4

単純なフォームでドロップダウン メニューに値を挿入する方法はありますか? このドロップダウンメニューがあります

<form>
  <select name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
  </select>
</form>

配列を使用する必要がありますか? 私はネットを検索していましたが、役立つものは何も見つかりませんでした。

4

2 に答える 2

4

ドロップダウンにアイテムを追加するJavaScriptソリューションは次のとおりです。

使用するHTML。

 <form>
    <select id="categories" name="users" onchange="showUser(this.value)">
    <option value="">Select a category:</option>
    <option value="movie">Movie</option>
    <option value="musik">Musik</option>
    <option value="books">Books</option>
    <option value="images">Images</option>
    </select>
    </form>​​

JavaScriptコード...

var categories = document.getElementById("categories");

var newOption = document.createElement('option');
newOption.innerText = "New value";
newOption.setAttribute('value', 'newvalue');

categories.appendChild(newOption);
​

jQueryコード...（はるかに短い）

$("#categories").append("<option value='newvalue'>New Value</option>");

これがJavaScriptJSFiddleとjQueryJSFiddleで遊ぶためのものです！

于 2012-07-14T13:55:31.717 に答える
1

jQueryappend()とイベントoption()を調べることができます...click

私はあなたのために実用的なソリューションを作成しました。これがあなたが探していたものであるかどうかはわかりませんが、これはそれがどのように機能するかです：
あなたは単に値と視覚的なオプション名をフォームテキストフィールドに書くだけです：value, textこれはあなたにこれを与えます：
<option value="value">text</option>

<select id="mySelect"></select>
<p>&nbsp;</p>
<input type="text" id="string"><br>
<button id="append">Append</button>


$('#append').click(function(){
    var str = $('#string').val();
    var substr = str.split(', ');
    $('#mySelect').append( new Option(substr[0],substr[1]));
});

動作するバージョンは次のとおりです：http： //jsfiddle.net/SCf8m/1/

于 2012-07-14T13:53:41.790 に答える