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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

7416閲覧

ラジオボタンで選択した値とセレクトボックスのオプションを連動したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/04/03 11:24

###前提・実現したいこと
いつもお世話になっております。
jQueryでラジオボタンで選択した値とセレクトボックスのオプションを連動したいのですがうまくできません。

現在、switch文でチェックが入っているラジオボタン事にセレクトのオプションのテキスト部分を変更してますが、
ラジオボタン選択後、「option」タグが消え単なるテキスト表示になっていまいます。
「option」タグを残しつつ、テキストの部分だけ入れ替えるにはどうすればよろしいでしょうか。
お手数おかけしますが、ご教授よろしくお願いします。

###発生している問題
・ラジオボタン選択後、「option」タグが消え単なるテキスト表示になっていまいます。

###該当のソースコード

javascript

1<script type="text/javascript"> 2 $(function() { 3 //console change 4 $("input:radio[name='radiobutton']").change(function() { 5 var variationText = $("[name=radiobutton]:checked").val(); 6 var consoleName = ".select_table td"; 7 8 switch (variationText) { 9 case "1_1": 10 $(consoleName).text('セレクトボックス1'); 11 break; 12 13 case "2_1": 14 $(consoleName).text('セレクトボックス2'); 15 break; 16 17 case "3_1": 18 $(consoleName).text('セレクトボックス3'); 19 break; 20 21 default: 22 break; 23 } 24 }); 25 }); 26</script>

###該当のソースコード

HTML

1<table class="select_table" border="0" cellspacing="0" cellpadding="0"> 2 <tr> 3 <th nowrap="nowrap">セレクトボックス</th> 4 <td><select name="select01"> 5 <option value="s_01">セレクトボックス1</option> 6 <option value="s_02">セレクトボックス2</option> 7 <option value="s_03">セレクトボックス3</option> 8 </select></td> 9 </tr> 10</table> 11<table cellspacing="0" cellpadding="0"> 12 <tr> 13 <th>ラジオボタン</th> 14 <th>選択</th> 15 </tr> 16 <tr> 17 <th>ラジオボタン1</th> 18 <td><label> 19 <input type="radio" name="radiobutton" value="1_1" /> 20 </label></td> 21 </tr> 22 <tr> 23 <th>ラジオボタン2</th> 24 <td><label> 25 <input type="radio" name="radiobutton" value="2_1" /> 26 </label></td> 27 </tr> 28 <tr> 29 <th>ラジオボタン3</th> 30 <td><label> 31 <input type="radio" name="radiobutton" value="3_1" /> 32 </label></td> 33 </tr> 34</table> 35

###試したこと
switch文でチェックが入っているラジオボタン事にセレクトのオプションのテキスト部分を変更してます。

###補足情報(言語/FW/ツール等のバージョンなど)
テスト環境URL
https://cart-js-yujiokayama.c9users.io/index.html

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

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

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

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

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

guest

回答2

0

的外れかもしれませんが、以下のような動作でしょうか?

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 </style> 12</head> 13<body> 14<table class="select_table" border="0" cellspacing="0" cellpadding="0"> 15 <tr> 16 <th nowrap="nowrap">セレクトボックス</th> 17 <td> 18 <label> 19 <select name="select01"> 20 <option value="s_01">セレクトボックス1</option> 21 <option value="s_02">セレクトボックス2</option> 22 <option value="s_03">セレクトボックス3</option> 23 </select> 24 </label> 25 </td> 26 </tr> 27</table> 28<table cellspacing="0" cellpadding="0"> 29 <tr> 30 <th>ラジオボタン</th> 31 <th>選択</th> 32 </tr> 33 <tr> 34 <th>ラジオボタン1</th> 35 <td> 36 <label> 37 <input type="radio" name="radiobutton" value="1_1"> 38 </label> 39 </td> 40 </tr> 41 <tr> 42 <th>ラジオボタン2</th> 43 <td> 44 <label> 45 <input type="radio" name="radiobutton" value="2_1"> 46 </label> 47 </td> 48 </tr> 49 <tr> 50 <th>ラジオボタン3</th> 51 <td> 52 <label> 53 <input type="radio" name="radiobutton" value="3_1"> 54 </label> 55 </td> 56 </tr> 57</table> 58<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 59<script> 60 $(function () { 61 //console change 62 $("input:radio[name='radiobutton']").change(function () { 63 var variationText = $("[name=radiobutton]:checked").val(); 64 var consoleName = ".select_table td select option";//変更。 65 66 switch (variationText) { 67 //変更、追加 68 case "1_1": 69 $(consoleName).eq(variationText.charAt(0) - 1).text("change1"); 70 $("option").attr("selected", false); 71 $(consoleName).eq(variationText.charAt(0) - 1).attr("selected", "selected"); 72 break; 73 case "2_1": 74 $(consoleName).eq(variationText.charAt(0) - 1).text('change2'); 75 $("option").attr("selected", false); 76 $(consoleName).eq(variationText.charAt(0) - 1).attr("selected", "selected"); 77 break; 78 case "3_1": 79 $(consoleName).eq(variationText.charAt(0) - 1).text('change3'); 80 $("option").attr("selected", false); 81 $(consoleName).eq(variationText.charAt(0) - 1).attr("selected", "selected"); 82 break; 83 default: 84 break; 85 } 86 }); 87 }); 88</script> 89</body> 90</html>

投稿2017/04/03 11:56

編集2017/04/03 11:56
s8_chu

総合スコア14731

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

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

退会済みユーザー

退会済みユーザー

2017/04/03 12:18

s8_chuさん ご返答ありがとうございます。 「.charAt」初めて知りました。 同じ動作でも実現方法もいろいろあって勉強になりました。 ご提供いただいたコードでも実現できましたので、この度はありがとうございました!
guest

0

ベストアンサー

リスト化しておいたほうが早いのでは?

javascript

1$(function() { 2 $('input[name=radiobutton]').on('change',function() { 3 var variationText = $(this).filter(':checked').val(); 4 var consoleName = ".select_table select[name=select01]"; 5 var list={'1_1':'s_01','2_1':'s_02','3_1':'s_03'}; 6 if(typeof list[variationText]!="undefined"){ 7 $(consoleName).val(list[variationText]); 8 } 9 }); 10}); 11

投稿2017/04/03 12:06

yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2017/04/03 12:15

yambejpさん ご返答ありがとうございます。 switchを使わずに、簡潔で見やすいコードの提供ありがとうございます。 やりたいことが実現できました! ありがとうございます。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問