３つのプルダウンの選択内容を１つの項目でリセットしたいです。

option2、option3で選択された内容をoption1で「リセット」を選択することでリセットするようにしたいのですが上手くいきません。

どなたか間違いを教えてはいただけませんでしょうか

行動規範の内容に同意します

回答2件

$("#option1") は id 属性の指定であって、name 属性でしていするなら $("select[name='option1']") のようにする必要がある

というのは yug13 さんの回答のとおりですが・・・

selected は option 要素の属性です、select 要素ではありません。なので、select 要素の小要素である option に指定する必要があります。例えば $("select[name='option2'] option") のようにです。

selected を false にするのはプロパティ(prop)です。例えば次のようにです。

js
1$("[name='option2'] option").prop("selected",false);

属性で制御するなら removeAttr で削除する必要があります。

js
1$("select[name='option2'] option").removeAttr("selected");

ただ、removeAttr はオススメしません。prop で false にするほうが良いと思います。

投稿2016/02/15 11:25

ngyuki

総合スコア4514

miva

2016/02/16 04:05

分かりやすくご丁寧な投稿に大変感謝しています！とても助かりました。有難うございました。

行動規範の内容に同意します

ベストアンサー

・jQueryの$("#option1")で取得できる要素は id="option1"の要素です。name="option1"しかないので取得できません。
→つまりこの方法ではプルダウンのなにが選択されたのかが判定できません

・質問にあった $("option").attr('selected',false); の方法だとうまく行きませんでした。何故かは確かめてないですが。
→直接戻したい値を指定したらできました。

・selectにidを付けたくない場合は、name属性を指定することでも取得できます。

javascript
1$("select[name='option1']").val();

html
1<script type="text/javascript">
2    $(document).ready(function () {
3        console.log($("#option1").val());
4        $("#option1").change(function () {
5            if ($(this).val() == "none") {
6                console.log("none selected");
7                $("#option2").val("start20");
8                $("#option3").val("start30");
9            }
10        });
11    });
12</script>
13<form>
14    <h5>テスト</h5>
15    <select name="option1" id="option1">
16        <option value="start">ステップ1</option>
17        <option value="step11">ステップ２</option>
18        <option value="step12">ステップ３</option>
19        <option value="none">リセット</option>
20    </select>
21    <select name="option2" id="option2">
22        <option value="start20" selected>初期</option>
23        <option value="step21">ステップ２</option>
24        <option value="step22">ステップ３</option>
25        <option value="step23">ステップ４</option>
26    </select>
27    <select name="option3" id="option3">
28        <option value="start30" selected>初期</option>
29        <option value="step31">ステップ２</option>
30        <option value="step32">ステップ３</option>
31        <option value="step33">ステップ４</option>
32    </select>
33</form>