HTMLのフォームで、チェックボックスでチェックした項目をプルダウンメニューに反映させる方法を教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/12/25 23:46:31
  • 終了:2012/12/26 19:11:45

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/12/26 08:27:05

ポイント250pt
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>
  $(function(){
    //チェックボックス初期化
    $(':checked').each(function(){
      this.checked = false;
    });
    $(':checkbox').change(function() {
      var opt = $('<option>').text($('label[for="'+this.id+'"]').text()).val(this.value);
      var selectbox = $('#selectbox');
      if (selectbox.find('[value="'+this.value+'"]').length) {
        selectbox.find('[value="'+this.value+'"]').remove();
      } else {
        selectbox.append(opt)
      }
    });
  });
  </script>
</head>
<body>
  <form name="form1">
    <input type="checkbox" name="q1" value="aaa" id="aaa1"><label for="aaa1">aaa</label>
    <input type="checkbox" name="q1" value="bbb" id="bbb1"><label for="bbb1">bbb</label>
    <select id="selectbox" name="select1" size="1">
    </select>
  </form>
</body>
</html>
他3件のコメントを見る
id:Cherenkov

まちがえた。チェックボックス自体にidが付いているのならば、
$('#id1, #id2')とか。

2012/12/26 19:07:14
id:hamocha

ありがとうございます!

2012/12/26 19:08:54

その他の回答(1件)

id:oil999 No.1

oil999回答回数1728ベストアンサー獲得回数3202012/12/26 00:05:38

ポイント50pt

HTMLだけではできません。
JavaScriptを使います。
下記ページを参考にしてください。
http://misf.blog16.fc2.com/blog-entry-5.html

id:hamocha

ありがとうございます。
サンプルがあるソースだと助かりますが、ないですよね?

2012/12/26 00:29:39
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932012/12/26 08:27:05ここでベストアンサー

ポイント250pt
<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script>
  $(function(){
    //チェックボックス初期化
    $(':checked').each(function(){
      this.checked = false;
    });
    $(':checkbox').change(function() {
      var opt = $('<option>').text($('label[for="'+this.id+'"]').text()).val(this.value);
      var selectbox = $('#selectbox');
      if (selectbox.find('[value="'+this.value+'"]').length) {
        selectbox.find('[value="'+this.value+'"]').remove();
      } else {
        selectbox.append(opt)
      }
    });
  });
  </script>
</head>
<body>
  <form name="form1">
    <input type="checkbox" name="q1" value="aaa" id="aaa1"><label for="aaa1">aaa</label>
    <input type="checkbox" name="q1" value="bbb" id="bbb1"><label for="bbb1">bbb</label>
    <select id="selectbox" name="select1" size="1">
    </select>
  </form>
</body>
</html>
他3件のコメントを見る
id:Cherenkov

まちがえた。チェックボックス自体にidが付いているのならば、
$('#id1, #id2')とか。

2012/12/26 19:07:14
id:hamocha

ありがとうございます!

2012/12/26 19:08:54
id:hamocha

No.2 の方が回答くださった方法がうまくいったのですが、全てのチェックボックスが反応してしまうため、特定の"id"や"name"を付けたチェックボックスからのみ取得する方法などが分かる方がおりましたら教えてください。
(他の方法がありましたらそちらでも大丈夫です)

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません