jQueryで特定のoptionを選択状態にする方法

次のようなHTMLがあったとします。

<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>

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>

3番目のオプション「x」が選択されます。最後に該当するものが選択されるようです。
別のオプションのvalueとtextに同じ値をセットすることはまずないと思いますが。

なお次のようにしても正しく動作しません。

$("select").text("x");

jQueryのcssで得られる色情報はブラウザによって違う

jQueryでstyleで指定したフォントの色に関する情報は次のようにして得られます。 (さらに…)

WikipediaAPIを使ってみる

今、GoogleやYahoo!のAPIについて調べているのですが、その中でウィキペディアの検索結果を取得できるAPIがあることを知りました。

WikipediaAPI - ウィキペディア情報をサイトで利用できるAPI

5年も前からあるのですね。
どんな動きをするのか、サンプルを作って確認してみました。jQueryを使っています。 (さらに…)

jQueryでTwitterAPIを使う簡単なサンプル

TwitterAPIを使うと自分のツイートなどが簡単に取得できます。
またjQueryを使うとこれをブラウザに簡単に表示できます。
そのための最低限のサンプルを紹介します。 (さらに…)

「Timeglider」でTOKIOとSMAPと嵐のメンバーを年表に

jQueryを使って年表を作成する「Timeglider」を紹介します。
Timeglider: Web-based Timeline Software

試しにTOKIOとSMAPと嵐のメンバーを年表に表してみました。 (さらに…)

jQueryのnextUntilを使う

HTMLで、最初は見出しだけが表示されていて、クリックするとその見出しの配下が表示されるページを作ってみます。
jQueryを使います。
HTMLは次の通りです。

<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>
<h2>見出し2</h2>
<h3>見出し3</h3>
<p>本文。</p>

配下と言ってもh2とh3とpは親子関係にはありません。
このような場合はnextUntilを使います。ある要素からある要素までを取得します。
正確には「ある要素の次からある要素の前まで」ですので、ちょうど要素に挟まれた部分を取得できるのです。
サンプルコードは次の通りです。

$("h2").nextUntil("h2").hide();
$("h2").click(function(){
  $(this).nextUntil("h2").toggle("fast");
});

まず、h2とh2に挟まれた部分を非表示にしておきます。
次に、h2をクリックすると、クリックした部分(this)と次のh2に挟まれた部分にtoggleを適用します。toggleは表示と非表示を交互に行います。

新しい記事

タグ

カテゴリー

最近の投稿

最近のコメント

固定ページ

アーカイブ

stabucky

写真

メタ情報