質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.12%

プルダウン未選択時の文字表示切替とラジオボタン活性化の方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 4,818

GranCD

score 13

プログラミング初心者です。下記のソースコードを用いて、表示されたプルダウンでの選択結果により、文字の表示切替とラジオボタンの活性化/非活性化切替を行おうとしています。

文字の表示切替とラジオボタンの活性化/非活性化切替は実現できていますが、プルダウンが未選択のとき、表示切替と活性化/非活性化の方法がわからず困っています。

【質問】
プルダウンが未選択「選択してください」のときに、「いちご」選択時と同様の結果を表示させる方法をご教授頂けないでしょうか?ソースコードもご教授頂けると幸いです。

※また、表示切替とラジオボタン活性化/非活性の方法についてよりスマートな方法がありましたら、ご教授お願い致します。

何卒宜しくお願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>くだもの</title>
<script type="text/javascript">
    /*ラジオボタンの活性化と非活性化*/
    function labelChange1(){
        if(document.getElementById('selectList')){
            id = document.getElementById('selectList').value;
            /*みかん選択時*/
            if(id=='list1'){
                document.getElementById('radioAbl').style.display="none";
                document.getElementById('radioDsbl').style.display="";
            /*その他選択時*/
            }else if(id=='list0'||'list2'){
                document.getElementById('radioAbl').style.display="";
                document.getElementById('radioDsbl').style.display="none";
            }
        }
    }
    /*表示切替*/
    function labelChange2(){
        if(document.getElementById('selectList')){
            id = document.getElementById('selectList').value;
            /*りんご選択時*/
            if(id=='list0'){
                document.getElementById('American').style.display="none";
                document.getElementById('British').style.display="";
            /*その他選択時*/
            }else if(id=='list1'||'list2'){
                document.getElementById('American').style.display="";
                document.getElementById('British').style.display="none";
            }
        }
    }
</script>
</head>
<body>
    <form method="POST">
        <table class="table-css" cellspacing="0" cellpadding="2">
            <tr>
                <td  class="td-css" width="250" valign="middle" align="center" nowrap>
                    プルダウン
                </td>
                <td class="td-css" width="460" valign="middle" align="left">
                <!-- くだものリスト -->
                    <select id="selectList" name="dataList" style="width:100" onchange="labelChange1(); labelChange2()">
                        <option disabled selected>選択してください</option>
                        <option value="list0">りんご</option>
                        <option value="list1">みかん</option>
                        <option value="list2">いちご</option>
                    </select>
                </td>
            </tr>
        </table>

        <table class="table-css" cellspacing="0" cellpadding="2">
            <tr>
                <!-- 国籍選択 -->
                <td rowspan="2" class="td-css" width="200" valign="middle" align="center" nowrap>
                    国籍
                </td>
                <!-- 国籍ラジオボタン -->
                <td class="td-css-br" width="50" valign="middle" align="center">
                    <input type="radio" name="radio1" checked>
                </td>
                <td class="td-css-blr" width="200" valign="middle" align="left" nowrap>
                    <font size="2">日本人</font>
                </td>
                <td class="td-css-bl" width="300" valign="middle" align="left">
                </td>
            </tr>
            <tr>
                <!-- ラジオボタン活性化 -->
                <td id="radioAbl" class="td-css-tr" width="50" valign="middle" align="center">
                    <input type="radio" name="radio1" >
                </td>
                <!-- ラジオボタン非活性化 -->
                <td id="radioDsbl" class="td-css-br" width="50" valign="middle" align="center">
                    <input type="radio" name="radio1" disabled>
                </td>
                <td class="td-css-tlr" width="200" valign="middle" align="left" nowrap>
                    <!-- 表示切替 -->
                    <div id="American">
                        <font size="2">
                        アメリカ人
                        </font>
                    </div>
                    <div id="British">
                        <font size="2">
                        イギリス人
                        </font>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

途中で飽きてきちゃったんでかなりいい加減ですが、こんなのがやりたいことなのかな、というのを書いてみました。
くだものを選んだときにどの国籍を表示してどの国籍を選択可能にするか、をひとつの連想配列に書くようにしてみました。でもって、初期化もくだものを選択したときと同じ関数が呼ばれるようにしてみました。

jQuery 使った方がいいのに、と思って jQuery を使ったコードを書こうかな、と思っていたのですが、暇がなくなったのでご要望があれば後ほど。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>くだもの</title>
    <style>
      table.table-css {
        cellspacing: 0;
        cellpadding: 2;
      }
      table.table-css td {
        valign: middle;
      }
      ul.nations {
        list-style: none;
      }
      ul.nations ul {
        list-style: none;
      }
      ul.nations span {
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <form method="POST">
      <table class="table-css">
    <tr>
      <td  class="td-css" width="250" align="center" nowrap>
        プルダウン
      </td>
      <td class="td-css" width="460" align="left">
        <!-- くだものリスト -->
        <select id="fruitList" name="dataList" style="width:100" onchange="stuff.change();">
          <option disabled selected value="nothing">選択してください</option>
          <option value="apple">りんご</option>
          <option value="orange">みかん</option>
          <option value="strawberry">いちご</option>
        </select>
      </td>
    </tr>
      </table>

      <ul class="nations">
    <li>国籍</li>
    <ul id="nationList">
      <li><input type="radio" name="radio1" value="japanese"><span>日本人</span></li>
      <li><input type="radio" name="radio1" value="american"><span>アメリカ人</span></li>
      <li><input type="radio" name="radio1" value="british"><span>イギリス人</span></li>
    </ul>
      </ul>
    </form>
    <script type="text/javascript">
      var stuff = {
        spec: {
          fruits: {
            nothing: {
              japanese: { visible: true, enabled: true },
              american: { visible: true },
            }, 
            apple: {
              japanese: { visible: true, enabled: true },
              british: { visible: true },
            }, 
            orange: {
              japanese: { visible: true, enabled: true },
              american: { visible: true, enabled: true },
              british: { visible: true },
            }, 
            strawberry: {
              japanese: { visible: true, enabled: true },
              american: { visible: true, enabled: true },
              british: { visible: true, enabled: true },
            }, 
          },
        },
        start: function() {
          var stuff = this;
          stuff.fruitList = document.getElementById('fruitList');
          stuff.nationItems = document.getElementById('nationList').children;
          this.change();
        },
        change: function() {
          var stuff = this;
          var fruit = stuff.fruitList.value;
          console.log('fruit', fruit);
          var spec = stuff.spec.fruits[fruit];
          if (typeof spec == 'undefined') return false;
          console.log('spec', spec);
          for (var i = 0, n = stuff.nationItems.length; i < n; i++) {
            var item = stuff.nationItems[i];
            var radio = item.children[0];
            var name = radio.value;
            if (spec[name] && spec[name].visible) { 
              item.style.display = '';
            } else {
              item.style.display = 'none';
            }
            if (spec[name] && spec[name].enabled) { 
              radio.disabled = '';
            } else {
              radio.disabled = 'disaabled';
            }
          }
        }
      };
      document.addEventListener('DOMContentLoaded', function() {
        stuff.init();
      });
    </script>
  </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/07 12:42

    ご回答頂きましてありがとうございます。
    javascriptの連想配列でのアプローチもあるのですね!
    また、初期状態時の方法もご教授して頂きましてありがとうございます。
    勉強になりました。

    キャンセル

+1

選択してくださいの時に~よりは、デフォルトの選択値をいちごにするのはダメですか?

<select name="selectList" id="selectList" onchange="labelChange()">
  <option value="list0">りんご</option>
  <option value="list1">みかん</option>
  <option value="list2" selected>いちご</option>
</select>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/07 12:44

    ご回答頂きましてありがとうございます。
    デフォルトで「選択してください」を表示させたいです。
    初期状態時にプルダウンには「選択してください」を表示させ、「選択してください」は選択不可にしたいためです。
    説明不足で申し訳ありません。

    キャンセル

checkベストアンサー

0

余計なclassやインラインのstyleは削除しました。
下記のような感じでしょうか。

ちなみに、やりたいことというかコードの意図がよくわかりませんが、

・input type="radio"にvalueが設定されていないので、このラジオボタンは選択されていてもなんの情報ももっていません。
・表示/非表示と活性化/非活性化は意味が違います
 非活性化とは、ご自身でもコードにかかれているように、disabledを使って、クリックできなくすることです
・このケースだと、if-elseで条件分岐をするよりも、switch-caseで分岐したほうが、条件ごとの処理をまとめてかけるからスッキリするのではないでしょうか?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function labelChange() {
            // プルダウンのvalueを取得する
            var value = document.getElementById("selectList").value;
            // console.log(value);

            var american = document.getElementById("american");
            var britsh = document.getElementById("british");

            switch (value) {
                case "list0": // りんごの場合
                    // アメリカ人を非表示にして、イギリス人を表示
                    american.style.display = "none";
                    britsh.style.display = "";
                    // イギリス人の選択肢を活性化
                    document.getElementById("radio_british").disabled = false;
                    break;
                case "list1": // みかんの場合
                    // アメリカ人を表示にして、イギリス人を非表示
                    american.style.display = "";
                    britsh.style.display = "none";
                    // アメリカ人の選択肢を非活性化
                    document.getElementById("radio_american").disabled = true;
                    break;
                case "選択してください: // 選択してください、にはvalueが設定されていない
                case "list2": // いちごの場合
                    // アメリカ人を表示にして、イギリス人を非表示
                    american.style.display = "";
                    britsh.style.display = "none";
                    // アメリカ人の選択肢を活性化
                    document.getElementById("radio_american").disabled = false;
                    break;
            }
        }
    </script>
</head>
<body>
<form action="/" method="post">
    <table>
        <!-- プルダウン -->
        <tr>
            <td>くだもの</td>
            <td>
                <select name="selectList" id="selectList" onchange="labelChange()">
                    <option disabled selected>選択してください</option>
                    <option value="list0">りんご</option>
                    <option value="list1">みかん</option>
                    <option value="list2">いちご</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>国籍</td>
            <td>
                <div id="japanese">
                    <input type="radio" name="radio1" id="radio_japanese" value="日本人">
                    <label for="radio_japanese" checked>日本人</label>
                </div>
                <div id="american">
                    <input type="radio" name="radio1" id="radio_american" value="アメリカ人">
                    <label for="radio_american">アメリカ人</label>
                </div>
                <div id="british" style="display:none;">
                    <input type="radio" name="radio1" id="radio_british" value="イギリス人" disabled>
                    <label for="radio_british">イギリス人</label>
                </div>
            </td>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/07 00:41

    ご回答頂きましてありがとうございます。
    今回の場合ですと、確かにswitch-caseを用いた方が明らかにすっきりしています。参考にさせて頂きます。

    ご回答頂いたコードですと、プルダウンが未選択状態のとき、ラジオボタンが3つ(日本人、アメリカ人、イギリス人)が表示されています。質問の繰り返しとなり申し訳ありませんが、プルダウンが未選択状態のときに、「いちご」を選択時と同様の結果(ラジオボタンが2つ。日本人とアメリカ人のみ)を表示する方法をご教授頂けないでしょうか?

    キャンセル

  • 2016/02/07 05:59 編集

    >プルダウンが未選択状態のときに、「いちご」を選択時と同様の結果(ラジオボタンが2つ。日本人とアメリカ人のみ)を表示する方法

    あ、すみません。こちらを忘れていました。
    一つ確認なのですが、「選択してください」のoptionにはdisabledがついていますね。
    これは、一度プルダウンを変更すると、二度と「選択してください」を選べないことになりますが、それは意図してることですか?

    いずれにせよ、初期状態(=未選択時)では最初からイギリス人を表示しないようにすればよいかと。

    <div id="british" style="display:none;">

    それと、いちごと同じ選択肢の状態ということでしたら、


    case "選択してください": // 選択してください、にはvalueがないので
    case "list2": // いちごの場合
    // アメリカ人を表示にして、イギリス人を非表示
    american.style.display = "";
    britsh.style.display = "none";
    // アメリカ人の選択肢を活性化
    document.getElementById("radio_american").disabled = false;
    break;


    このように続けてかけば、「いちご」と「選択してください」の時の動作は同じになります。ただし、先に書いたとおり、「選択してください」にはdisabledが付いているのでこのままだと選べない状態です。

    キャンセル

  • 2016/02/07 06:08

    コメント欄だとコードの色付けできないんですね。
    元の回答のコードを修正しておきますね。

    キャンセル

  • 2016/02/07 12:41

    ご回答頂きましてありがとうございます。
    実現したかったのはまさにこの内容です!
    参考にさせて頂きます。

    >一つ確認なのですが、「選択してください」のoptionにはdisabledがついていますね。
    これは、一度プルダウンを変更すると、二度と「選択してください」を選べないことになりますが、それは意図してることですか?
    ⇒意図して「選択してください」にdisabledを付けています。初期状態時にプルダウンには「選択してください」を表示させる、かつ「選択してください」は二度と選べないようにしたいため、disabledを付けています。説明不足で申し訳ありませんでした。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる