| 両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン |
| study:javascript:jquery:select [2010/10/02 12:18] – banana | study:javascript:jquery:select [2021/03/03 01:30] (現在) – [Test Page] banana |
|---|
| まずはデモから見てみよう。 | まずはデモから見てみよう。 |
| |
| ===== Test Page ===== | ===== Test Page ===== |
| <html> | <html> |
| <head> | <head> |
| <html> | <html> |
| <head> | <head> |
| <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script> | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
| <script type="text/javascript"> | <script type="text/javascript"> |
| <!-- | <!-- |
| function showValue(){ | function showValue(){ |
| alert($("#example").val()); | alert($("#example1").val()); |
| } | } |
| function showText(){ | function showText(){ |
| alert($("#example :selected").text()); | 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> | </script> |
| </head> | </head> |
| <body> | <body> |
| <select id="example"> | <select id="example1" name="entry[0].queNo" onchange="queChange(this);"> |
| <option value="1">This is the first item.</option> | <option value="1">This is the first item.</option> |
| <option value="2">This is the second item.</option> | <option value="2" selected="selected">This is the second item.</option> |
| <option value="3">This is the third item.</option> | <option value="3">This is the third item.</option> |
| </select> | </select> |
| <input type="button" name="test1" value="selected vlaue" onclick="showValue();"/> | <input type="button" name="test1" value="selected value" onclick="showValue();"/> |
| <input type="button" name="test2" value="selected text" onclick="showText();"/> | <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> | </body> |
| |
| </html> | </html> |
| | |
| | コードの一部を次に示す。 |
| | <code Javascript> |
| | $("#example1").val(); |
| | $("#example1 :selected").text(); |
| | $("#example1").get(0).selectedIndex |
| | </code> |
| |
| ===== reference ===== | ===== reference ===== |
| - [[http://www.electrictoolbox.com/jquery-add-option-select-jquery/|Add a new option to a select with jQuery]] | - [[http://www.electrictoolbox.com/jquery-add-option-select-jquery/|Add a new option to a select with jQuery]] |
| - [[http://d.hatena.ne.jp/x6x6/20080318/1205817536|jQueryでoption要素を追加した際の諸問題]] | - [[http://d.hatena.ne.jp/x6x6/20080318/1205817536|jQueryでoption要素を追加した際の諸問題]] |
| | - [[http://www.c-sharpcorner.com/blogs/BlogDetail.aspx?BlogId=1214|JQuery Tutorial:3 ways to access the selection in an HTML drop down list box]] |
| |
| | ~~DISCUSSION~~ |
| |
