人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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


●質問者: hamocha
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● oil999
●50ポイント

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


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

2 ● Cherenkov
●250ポイント ベストアンサー
<!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>

Cherenkovさんのコメント
jqueryを使って。時間が無くててけとうですが。

hamochaさんのコメント
ありがとうございます! 現状全てのチェックボックスからデータを取得するようですが、特定の"id"や"name"を付けたチェックボックスからのみ取得するといった事などはできるでしょうか?

Cherenkovさんのコメント
できますが、そちらのHTMLを提示したほうが解決が早いと思いますよ。 $('#id :checkbox')とかにするだけです。

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

hamochaさんのコメント
ありがとうございます!

質問者から

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


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ