jQueryで特定のoptionを選択状態にする方法
次のようなHTMLがあったとします。
<select>
<option>a</option>
<option value="x">b</option>
<option>c</option>
<option>d</option>
</select>
<option>a</option>
<option value="x">b</option>
<option>c</option>
<option>d</option>
</select>
このとき、jQueryで、次のようなコードを使うとどうなるでしょうか。
$("select").val("x");
2番目のオプション「b」が選択状態になります。
「このselectの値を「x」にする」というような感じです。
しかし次のようにvalueがセットされていない場合でも動作します。
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>x</option>
</select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>x</option>
</select>
4番目のオプション「x」が選択されます。
<option value="あ">い</option>
この場合、JavaScriptでは「.value」を使うと「あ」、「.text」を使うと「い」となりますが、jQueryで「.val()」を使うと、両方が該当するようです。
では、valueとtextの両方に「x」がある場合はどうなるでしょうか。
<select>
<option>a</option>
<option value="x">b</option>
<option>x</option>
<option>d</option>
</select>
<option>a</option>
<option value="x">b</option>
<option>x</option>
<option>d</option>
</select>
3番目のオプション「x」が選択されます。最後に該当するものが選択されるようです。
別のオプションのvalueとtextに同じ値をセットすることはまずないと思いますが。
なお次のようにしても正しく動作しません。
$("select").text("x");
[ 2011年9月28日 | カテゴリー: デジタル | タグ: jQuery , tips ]
« 「ドンナヒ」に日経平均株価を表示 | 中央新幹線(リニア)の対象事業実施区域 »
コメントを残す