茨城県ニュース(30件)

茨城県のQ&A(12件)

  • 締切済

    質問セレクトボックスを未選択の状態にするには?

    • 2016/6/21
    • CaveatEmptor

    html / css / javascriptの初心者です。

    いろいろなサイトで勉強しながら、アンケートフォーム(メールフォーム)を作っています。

    所在地を選択してもらうのに、最初にラジオボタンで「関東」などのよう地域を選択してもらってから、都道府県をセレクトボックスで選択してもらうように作りました。

    ラジオボタンを選択したら、都道府県を選ぶセレクションボックスのところにその地域の都道府県を表示するところまではできました。

    しかし、例えば、最初に「関東」→「東京」と選択したあとに、選択し直して「北海道・東北」→「福島」と選択すると、「東京」の値が残ってしまいます。選択し直した場合に、他のセレクトボックスの値を未選択の状態(nullにするということであっていますか?)にするにはどうしたらいいでしょうか?

    <script type="text/javascript">
    function entryChange1(){
    radio = document.getElementsByName('所在地')
    if(radio[0].checked) {
    document.getElementById('firstBox').style.display = "";
    document.getElementById('secondBox').style.display = "none";
    document.getElementById('thirdBox').style.display = "none";
    document.getElementById('fourthBox').style.display = "none";
    document.getElementById('fifthBox').style.display = "none";
    document.getElementById('sixthBox').style.display = "none";
    document.getElementById('seventhBox').style.display = "none";
    }else if(radio[1].checked) {
    document.getElementById('firstBox').style.display = "none";
    document.getElementById('secondBox').style.display = "";
    document.getElementById('thirdBox').style.display = "none";
    document.getElementById('fourthBox').style.display = "none";
    document.getElementById('fifthBox').style.display = "none";
    document.getElementById('sixthBox').style.display = "none";
    document.getElementById('seventhBox').style.display = "none";

    <途中省略>

    }else if(radio[6].checked) {
    document.getElementById('firstBox').style.display = "none";
    document.getElementById('secondBox').style.display = "none";
    document.getElementById('thirdBox').style.display = "none";;
    document.getElementById('fourthBox').style.display = "none";
    document.getElementById('fifthBox').style.display = "none";
    document.getElementById('sixthBox').style.display = "none";
    document.getElementById('seventhBox').style.display = "";
    }
    }
    //オンロードさせ、リロード時に選択を保持
    window.onload = entryChange1;
    </script>


    <tr id="firstBox">
    <th class="col-xs-5 col-md-3">所在地<font color="red"><b>※必須</b></font></th>
    <td class="col-xs-5 col-md-7">
    <select name="北海道・東北">
    <option value="" selected>-- 選択して下さい --</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>
    <option value="宮城県">宮城県</option>
    <option value="秋田県">秋田県</option>
    <option value="山形県">山形県</option>
    <option value="福島県">福島県</option>
    </select>
    </td>
    </tr>
    <tr id="secondBox">
    <th class="col-xs-5 col-md-3">所在地<font color="red"><b>※必須</b></font></th>
    <td class="col-xs-5 col-md-7">
    <select name="関東">
    <option value="" selected>-- 選択して下さい --</option>
    <option value="茨城県">茨城県</option>
    <option value="栃木県">栃木県</option>
    <option value="群馬県">群馬県</option>
    <option value="埼玉県">埼玉県</option>
    <option value="千葉県">千葉県</option>
    <option value="東京都">東京都</option>
    <option value="神奈川県">神奈川県</option>
    </select>
    </td>
    </tr>

    <以下省略>

    何か解決のヒントか参考のサイトなど紹介していただけると助かります。

    よろしくお願いいたします。m(__)m

    続きを読む

  • 回答

    • 2016/6/21
    • yambejp
    • ベストアンサー

    style.display = "none"しても表示を消してるだけですからね
    disabled=tureも併用してください

    逆に表示するときにstyle.display = "" すると同時に
    disabled=falseするように

    続きを読む

朝~午後の紫外線指数をチェック!紫外線指数情報