Append select option using jquery
jqueryを利用し、動的にoptionを作成する方法を紹介する。 まずはデモから見てみよう。
Test Page
<html> <head> <script type=“text/javascript” src=“./test/js/jquery-1.4.2.js”></script> <script type=“text/javascript”> <!– function addOption1(){
var index = $('#example option').length + 1
$("#example").append($("<option/>").val(index).text("This is option#"+index).attr("selected", "selected"));
}
function remove(){
$("#example option").remove();
}
function replace(){
var options = newOptions = {
'red' : 'Red',
'blue' : 'Blue',
'green' : 'Green',
'yellow' : 'Yellow'
};
$("#example option").remove();
$.each(options, function(key, val){
$("#example").append($("<option/>").val(key).text(val));
});
$("#example").val("green");
}
function reset(){
$("#example option").remove();
$("#example").append($("<option/>").val("1").text("This is the first option"));
$("#example").append($("<option/>").val("2").text("This is the second option"));
$("#example").append($("<option/>").val("3").text("This is the third option"));
} –> </script> </head> <body> <select id=“example”> <option value=“1”>This is the first item.</option> <option value=“2”>This is the second item.</option> <option value=“3”>This is the third item.</option> </select> <input type=“button” name=“test1” value=“remove” onclick=“remove();”/> <input type=“button” name=“test2” value=“Add an option” onclick=“addOption1();”/> <input type=“button” name=“test3” value=“replace” onclick=“replace();”/> <input type=“button” name=“test4” value=“reset” onclick=“reset();”/> </body> </html> ===== code snippet ===== <code Javascript> function replace(){ var options = newOptions = { 'red' : 'Red', 'blue' : 'Blue', 'green' : 'Green', 'yellow' : 'Yellow' }; $(“#example option”).remove(); $.each(options, function(key, val){ $(“#example”).append($(“<option/>”).val(key).text(val)); }); $(“#example”).val(“green”); } </code> ===== access selected value ===== 因みに、選択された項目を取得する方法を紹介する。 デモを見てみる。 <html> <head> <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script> <script type=“text/javascript”> <!– function showValue(){ alert($(“#example1”).val()); } function showText(){ alert($(“#example1 :selected”).text()); } function showIndex() { alert($(“#example1”).get(0).selectedIndex); } function setValue() { selectedはずす
$("[name='entry[0].queNo'] option").attr("selected", false);
$("[name='entry[0].queNo']").val("3");
}
function queChange(obj) {
var selected = $(obj).get(0).selectedIndex;
$(obj).find("option").attr("selected", false);
}
–> </script> </head> <body> <select id=“example1” name=“entry[0].queNo” onchange=“queChange(this);”> <option value=“1”>This is the first item.</option> <option value=“2” selected=“selected”>This is the second item.</option> <option value=“3”>This is the third item.</option> </select> <input type=“button” name=“test1” value=“selected value” onclick=“showValue();”/> <input type=“button” name=“test2” value=“selected text” onclick=“showText();”/> <input type=“button” name=“test3” value=“selected index” onclick=“showIndex();”/> <input type=“button” name=“test4” value=“select 3rd item” onclick=“setValue();”/> </body> </html> コードの一部を次に示す。 <code Javascript> $(“#example1”).val(); $(“#example1 :selected”).text(); $(“#example1”).get(0).selectedIndex </code> ===== reference ===== - Add a new option to a select with jQuery - jQueryでoption要素を追加した際の諸問題 - JQuery Tutorial:3 ways to access the selection in an HTML drop down list box ~~DISCUSSION~~
