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

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

新規登録して質問してみよう
ただいま回答率
85.50%
ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

2回答

1698閲覧

JavaScriptで1つのラジオボタンと複数のリストボックスを連動させる

mnmn37373

総合スコア0

ラジオボタン

ラジオボタンはフォームに使われる要素のひとつであり、ユーザに限られた選択肢からひとつの答えを選んでもらうというものです。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/05/05 19:04

編集2022/01/12 10:55

前提・実現したいこと

JavaScript初心者です。
質問の記載が見にくかったら申し訳ないですが、ご教示いただけるとうれしいです。

1つのラジオボタンと複数のリストボックスが連動するコードを作成しています。
詳しくは下記のとおりです。
・ラジオボタンは、初期値がある場合とない場合の2パターンがある。
・ラジオボタンに初期値がある場合は、リストボックスは初期表示時から連動させる。
・連動条件はラジオボタンで選んだ数字が11以下であれば、リストボックスは「11」で始まる要素のみ表示し、ラジオボタンで55を選んだ場合のみ、リストボックスは「55」で始まる要素のみ表示する。
・リストボックスの要素を変化させる際は、text部分を見る。
・リストボックスは複数あるが、ラジオボタンと連動させる際の要素を変化させる処理はすべて同じ。

発生している問題

リストボックスの要素は、detachでいったん全要素を隔離(配列に保持)し、appendで戻す処理を考えてコードを記載したが、うまくいきません。

該当のソースコード

Javascript

1 const id_radio = 'e_1'; /*ラジオボタンのid*/ 2 const id_list = ['e_2','e_3','e_4']; /*連動するリストボックスのid*/ 3 const key1 = '11'; /*リストボックスの要素を変更する際に利用する文字列*/ 4 const key2 = '55'; 5 var befor_radio = ''; /*changeイベント検知前のラジオボタンの値*/ 6 var list_all = {}; /*連動するリストボックスの要素を格納する配列*/ 7$(function() { 8 window.onload = function() { 9 $.each(id_list, function(index, value){ 10 list_all [index] = $('#'+value).find('option').not(':first').detach(); /*すべてのリストボックスのoptionを退避*/ 11 }); 12 var befor_radio = $('[name="' + id_radio +'"]:checked').val(); 13 chengeOption(befor_radio); 14 } 15 function chengeOption(radio){ /*ラジオボタンの値を見てリストボックスの要素を変更*/ 16 if(radio ===""){ /*初期値なし*/ 17 $.each(id_list, function(index, value){ 18 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻す*/ 19 }) 20 } else if (radio == 5){ /*ラジオボタン 5*/ 21 $.each(id_list, function(index, value){ 22 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻してから*/ 23 list_all[value] = $('#'+ value).find('option').filer(function(index){ 24 return $(this).text().startsWith(key1); 25 }).detach();   /*不要な要素を再び配列に退避*/ 26 }) 27 } else if (radio < 5){ /*ラジオボタン 1~4*/ 28 $.each(id_list, function(index, value){ 29 $('#'+ value).append(list_all[value]); /*配列から要素をすべて戻してから*/ 30 list_all[value] = $('#'+ value).find('option').filer(function(index){ 31 return $(this).text().startsWith(key2); 32 }).detach();   /*不要な要素を再び配列に退避*/ 33 }) 34 } 35 } 36 $('[name=' + id_radio+ ']').change(function(){ 37 /*ラジオボタンを押下したときの処理*/ 38 }) 39})

html

1<head></head> 2<body> 3 <form> 4 <tr> 5 <th> 6 <pre>ラジオボタン</pre> 7 </th> 8 <td> 9 <label><input type="radio" id="e_1_1" name="e_1" value="1"><span id="l_1_1">3</span></label> 10 <label><input type="radio" id="e_1_2" name="e_1" value="2"><span id="l_1_2">5</span></label> 11 <label><input type="radio" id="e_1_3" name="e_1" value="3"><span id="l_1_3">8</span></label> 12 <label><input type="radio" id="e_1_4" name="e_1" value="4"><span id="l_1_4">11</span></label> 13 <label><input type="radio" id="e_1_5" name="e_1" value="5"><span id="l_1_5">55</span></label> 14 </td> 15 </tr> 16 <tr> 17 <th> 18 <pre>リストボックス1(連動)</pre> 19 </th> 20 <td> 21 <label> 22 <select id="e_2" name="e_2"> 23 <option value="">選択してください</option> 24 <option id="e_2_1" value="1">11 A</option> 25 <option id="e_2_2" value="2">55 A1</option> 26 <option id="e_2_3" value="3">55 A2</option> 27 <option id="e_2_4" value="14">11 B1</option> 28 <option id="e_2_5" value="15">11 B2</option> 29 <option id="e_2_6" value="5">55 B1</option> 30 <option id="e_2_7" value="6">55 B2</option> 31 <option id="e_2_8" value="16">11 C1</option> 32 <option id="e_2_9" value="17">11 C2</option> 33 <option id="e_2_10" value="8">55 C1</option> 34 <option id="e_2_11" value="9">55 C2</option> 35 <option id="e_2_12" value="10">55 D</option> 36 <option id="e_2_13" value="11">11 E</option> 37 <option id="e_2_14" value="18">11 F1</option> 38 <option id="e_2_15" value="19">11 F1</option> 39 <option id="e_2_16" value="20">55 F1</option> 40 <option id="e_2_17" value="21">55 F2</option> 41 </select> 42 </label> 43 </td> 44 </tr> 45 <tr> 46 <th> 47 <pre>リストボックス2(連動)</pre> 48 </th> 49 <td> 50 <label> 51 <select id="e_3" name="e_3"> 52 <option value="">選択してください</option> 53 <option id="e_3_1" value="1">11 A</option> 54 <option id="e_3_2" value="2">55 A1</option> 55 <option id="e_3_3" value="3">55 A2</option> 56 <option id="e_3_4" value="14">11 B1</option> 57 <option id="e_3_5" value="15">11 B2</option> 58 <option id="e_3_6" value="5">55 B1</option> 59 <option id="e_3_7" value="6">55 B2</option> 60 <option id="e_3_8" value="16">11 C1</option> 61 <option id="e_3_9" value="17">11 C2</option> 62 <option id="e_3_10" value="8">55 C1</option> 63 <option id="e_3_11" value="9">55 C2</option> 64 <option id="e_3_12" value="10">55 D</option> 65 <option id="e_3_13" value="11">11 E</option> 66 <option id="e_3_14" value="18">11 F1</option> 67 <option id="e_3_15" value="19">11 F1</option> 68 <option id="e_3_16" value="20">55 F1</option> 69 <option id="e_3_17" value="21">55 F2</option> 70 </select> 71 </label> 72 </td> 73 </tr> 74 <tr> 75 <th> 76 <pre>リストボックス3(連動)</pre> 77 </th> 78 <td> 79 <label> 80 <select id="e_4" name="e_4"> 81 <option value="">選択してください</option> 82 <option id="e_4_1" value="1">11 A</option> 83 <option id="e_4_2" value="2">55 A1</option> 84 <option id="e_4_3" value="3">55 A2</option> 85 <option id="e_4_4" value="14">11 B1</option> 86 <option id="e_4_5" value="15">11 B2</option> 87 <option id="e_4_6" value="5">55 B1</option> 88 <option id="e_4_7" value="6">55 B2</option> 89 <option id="e_4_8" value="16">11 C1</option> 90 <option id="e_4_9" value="17">11 C2</option> 91 <option id="e_4_10" value="8">55 C1</option> 92 <option id="e_4_11" value="9">55 C2</option> 93 <option id="e_4_12" value="10">55 D</option> 94 <option id="e_4_13" value="11">11 E</option> 95 <option id="e_4_14" value="18">11 F1</option> 96 <option id="e_4_15" value="19">11 F1</option> 97 <option id="e_4_16" value="20">55 F1</option> 98 <option id="e_4_17" value="21">55 F2</option> 99 </select> 100 </label> 101 </td> 102 </tr> 103 </form> 104</body>

試したこと

どうやら、要素のdetachはできているが、appendが出来ていないようです。
NG箇所の特定ができず困っています。

補足情報(FW/ツールのバージョンなど)

IE11で利用します。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Jon_do

2021/05/05 21:58

複数あるラジオボタンとセレクトボックスを連動させたいとありますが、 どのように連動させたいのでしょうか? 3 5 8 11 55 と謎の数字が振ってある ラジオボタンと謎の数字とアルファベットを選択するselectボックスがあるだけでは どのように連動させたいのか、わからない人が大多数だと思われますので 追記をお願いします。
gpsoft

2021/05/05 22:04

このJSとhtmlの内容だと、いろいろ気になる点があるのですが……。 ・head要素の中にbody要素がある? ・scriptタグの閉じタグが無い? ・window.onloadにセットした無名関数は、ちゃんと呼ばれてます? ・呼ばれたとしても、sel_data変数が未定義なのでエラーになりませんか? ・ラジオボタンを押したときの処理は空っぽですか? などなど。 detachはできてるとのことですが、確かですか?
mnmn37373

2021/05/05 22:18

>Jon_do さん ご指摘ありがとうございます。 連動させる条件を追記しました。
gpsoft

2021/05/05 22:50

filer()じゃなくて、filter()ですね。 それと、befor_radioを初期化する箇所ですが、 いまのコードだと、ラジオボタンがチェックされてない場合、undefinedになってしまいます。 上記2点と、前のコメントに書いた点を修正してみたら、一応、連動するようになりましたよ。
m.ts10806

2021/05/05 23:13

$(function() { の中に window.onload はほとんど意味ないですね。 それぞれどの程度理解したうえで実装しているのかは知りたい。
mnmn37373

2021/05/05 23:15

gpsoft さん たくさんのご指摘ありがとうございます。 初回投稿のため、コピペ、投稿にあたってのそのまま掲載できない箇所(変数の書き換え)が未修正でしたので、質問を修正しました。 →・head要素の中にbody要素がある? →・呼ばれたとしても、sel_data変数が未定義なのでエラーになりませんか? >それと、befor_radioを初期化する箇所ですが、 >いまのコードだと、ラジオボタンがチェックされてない場合、undefinedになってしまいます。 初期値なしの場合の判定が適切でないということですね。 下記で修正してみます。 if(radio === undefined) ただ、私の環境ではfilter()とbefor_radioの比較条件を変更しても、リストボックスの中身が 「選択してください」の1行のみになってしまい、連動しません。 →・ラジオボタンを押したときの処理は空っぽですか? 初期表示の処理で躓いていたため、まだラジオボタンを押したときの処理は作成できていません。
mnmn37373

2021/05/05 23:34 編集

m.ts10806さん ご指摘ありがとうございます。 お恥ずかしながら、勉強しはじめたばかりで理解がとても浅く、わからない箇所は都度しらべながら手探りで本を見ながらやっている状態です。 >$(function() { の中に window.onload はほとんど意味ないですね。 参考になるコードがあり、そちらに上記があったためお作法なのかと思いそのままにしていました。 「意味ない」ことがわかってよかったです。 調べてみます。
gpsoft

2021/05/05 23:58

> ただ、私の環境ではfilter()とbefor_radioの比較条件を変更しても、リストボックスの中身が > 「選択してください」の1行のみになってしまい、連動しません。 変更後のコードを載せていただければ、アドバイスできるかもしれませんよ。 あと、 sel_data[index] = ... を list_all [index] = ... へ変更されたようですが、 list_all[value] = ... が正解ではないでしょうか?
guest

回答2

0

javascript

1$(function(){ 2 $('[name=e_1]').on('change',function(){ 3 var num=parseInt($(this).closest('label').text()); 4 $('option').show().filter(function(){ 5 return $(this).closest('select').find('option').index(this)>0 && 6 (num<=11 && !/^11/.test($(this).text()) || 7 num==55 && !/^55/.test($(this).text())) 8 }).hide(); 9 $('select').prop('selectedIndex',0); 10 }); 11});

投稿2021/05/06 00:47

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mnmn37373

2021/05/12 08:04 編集

参考となるコードを提示頂きありがとうございます。 コメントがおそくなり大変失礼しました。 よくよくしらべたところ、IE11で動作させるためclosest()やhide()が利用できないことがわかりました。
yambejp

2021/05/12 08:52

IE11対応ですか・・・ $(function(){ var s={}; $('select').each(function(){ s[$(this).attr('id')]=$(this).find('option').get(); }); $('[name=e_1]').on('change',function(){ var num=parseInt($(this).closest('label').text()); $('select').each(function(){ $(this).find('option').remove().end().append(s[$(this).attr('id')]); $(this).find('option:gt(0)').filter(function(){ return (num<=11 && !/^11/.test($(this).text()) || num==55 && !/^55/.test($(this).text())); }).remove(); $(this).prop('selectedIndex',0); }); }); });
guest

0

こういうことでしょうか?
html+Javascript

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <table> <tr> <th> <pre>ラジオボタン</pre> </th> <td> <label><input type="radio" id="e_1_1" name="e_1" value="1"><span id="l_1_1">3</span></label> <label><input type="radio" id="e_1_2" name="e_1" value="2"><span id="l_1_2">5</span></label> <label><input type="radio" id="e_1_3" name="e_1" value="3"><span id="l_1_3">8</span></label> <label><input type="radio" id="e_1_4" name="e_1" value="4"><span id="l_1_4">11</span></label> <label><input type="radio" id="e_1_5" name="e_1" value="5"><span id="l_1_5">55</span></label> </td> </tr> <tr> <th> <pre>リストボックス1(連動)</pre> </th> <td> <label> <select id="e_2" name="e_2"> <option value="">選択してください</option> <option id="e_2_1" value="1">11 A</option> <option id="e_2_2" value="2">55 A1</option> <option id="e_2_3" value="3">55 A2</option> <option id="e_2_4" value="14">11 B1</option> <option id="e_2_5" value="15">11 B2</option> <option id="e_2_6" value="5">55 B1</option> <option id="e_2_7" value="6">55 B2</option> <option id="e_2_8" value="16">11 C1</option> <option id="e_2_9" value="17">11 C2</option> <option id="e_2_10" value="8">55 C1</option> <option id="e_2_11" value="9">55 C2</option> <option id="e_2_12" value="10">55 D</option> <option id="e_2_13" value="11">11 E</option> <option id="e_2_14" value="18">11 F1</option> <option id="e_2_15" value="19">11 F1</option> <option id="e_2_16" value="20">55 F1</option> <option id="e_2_17" value="21">55 F2</option> </select> </label> </td> </tr> </table> <table> <tr> <th> <pre>リストボックス2(連動)</pre> </th> <td> <label> <select id="e_3" name="e_3"> <option value="">選択してください</option> <option id="e_3_1" value="1">11 A</option> <option id="e_3_2" value="2">55 A1</option> <option id="e_3_3" value="3">55 A2</option> <option id="e_3_4" value="14">11 B1</option> <option id="e_3_5" value="15">11 B2</option> <option id="e_3_6" value="5">55 B1</option> <option id="e_3_7" value="6">55 B2</option> <option id="e_3_8" value="16">11 C1</option> <option id="e_3_9" value="17">11 C2</option> <option id="e_3_10" value="8">55 C1</option> <option id="e_3_11" value="9">55 C2</option> <option id="e_3_12" value="10">55 D</option> <option id="e_3_13" value="11">11 E</option> <option id="e_3_14" value="18">11 F1</option> <option id="e_3_15" value="19">11 F1</option> <option id="e_3_16" value="20">55 F1</option> <option id="e_3_17" value="21">55 F2</option> </select> </label> </td> </tr> </table> <table> <tr> <th> <pre>リストボックス3(連動)</pre> </th> <td> <label> <select id="e_4" name="e_4"> <option value="">選択してください</option> <option id="e_4_1" value="1">11 A</option> <option id="e_4_2" value="2">55 A1</option> <option id="e_4_3" value="3">55 A2</option> <option id="e_4_4" value="14">11 B1</option> <option id="e_4_5" value="15">11 B2</option> <option id="e_4_6" value="5">55 B1</option> <option id="e_4_7" value="6">55 B2</option> <option id="e_4_8" value="16">11 C1</option> <option id="e_4_9" value="17">11 C2</option> <option id="e_4_10" value="8">55 C1</option> <option id="e_4_11" value="9">55 C2</option> <option id="e_4_12" value="10">55 D</option> <option id="e_4_13" value="11">11 E</option> <option id="e_4_14" value="18">11 F1</option> <option id="e_4_15" value="19">11 F1</option> <option id="e_4_16" value="20">55 F1</option> <option id="e_4_17" value="21">55 F2</option> </select> </label> </td> </tr> </table> </form> <script> const radio = document.getElementsByTagName("input"); const opt01 = document.getElementById("e_2").getElementsByTagName("option"); const opt02 = document.getElementById("e_3").getElementsByTagName("option"); const opt03 = document.getElementById("e_4").getElementsByTagName("option"); for(let i = 0; i<radio.length; i++){ radio[i].addEventListener("change", () => { if(radio[i].value == "5") { optHide(opt01,11); optHide(opt02,11); optHide(opt03,11); }; if(radio[i].value !== "5") { optHide(opt01,55); optHide(opt02,55); optHide(opt03,55); } }); } // optionから55 or 11を表示する(55 or 11を隠す)関数 const optHide = (opt,num) => { for(let i = 1; i < opt.length; i++) { opt[i].style.display = ""; if(opt[i].innerText.match(num)){ opt[i].style.display = "none"; } } } </script> </html>

投稿2021/05/05 23:36

編集2021/05/05 23:51
Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問