JavaScript または jQuery を使用して HTML ボタンをクリックすると、ドロップダウンにデータを入力する必要があります。どんな助け/提案も大歓迎です! ありがとう !
3 に答える
まず、ボタンのクリック イベントのハンドラーをバインドします。
("#myBtnId").click(function (){
populateDropDown();
});
次に、ドロップダウンにデータを入力する関数を作成します
function populateDropdown(){
var $myDD = $("#myDropDownId");
$myDD.append("<option value='value'>Text</option>");
}
アイテムのリストがある場合は、リストを反復処理するためのコードを変更し、オプションの値とテキストを動的に配置するだけであることに注意してください。
function populateDropdown(listOfItems){
var $myDD = $("#myDropDownId");
for (var i = 0; i<listOfItems.lenght; i++){
$myDD.append("<option value='"+ listOfItems[i].value +"'>"+listOfItems[i].text+"</option>");
}
}
それはかなり簡単なはずです。
onclick イベントを設定するか、ボタンのイベント バインディングを使用して、ドロップダウンに入力する関数を呼び出すだけです。
例えば<button type='button' onclick='Populate();'>Populate</button>
そして、JavaScript 関数は単純に値を追加します。
function Populate() {
var dropdown = document.getElementById("dropdown_id_here");
dropdown.options[0] = new Option('Text 1', 'Value1');
dropdown.options[1] = new Option('Text 2', 'Value2');
// And so on, add as many options as required.
}
この機能を実現するには間違いなく数十の方法があるため、他のソリューションの方が適しているか、よりシンプルである可能性があります。
appendChild()
select タグの機能を使用して、オプションを追加し続けます。詳細はhttp://www.w3schools.com/dom/met_element_appendchild.aspで確認できます。
関数を使用して jQuery で行うこともできappend()
ます: http://api.jquery.com/append/
作業コードはhttp://jsfiddle.net/shubhanshumishra/jHFZZ/で確認できます。
<input id="clickMe" value="clickme" type="button" />
<select id="dropdown">
<option value="0">Select Fields</option>
</select>
これはJavascriptです:
$i=0;
$("#clickMe").click(function(e){
$i++;
$("#dropdown").append("<option value='"+$i+"'>New Field</option>");
});