JavaScriptでSelectboxのvalueを取得し、特定のvalue値でinputタグを表示する方法
- JavaScriptを使用して、Selectboxのvalueを取得し、特定のvalue値によってブラウザにinputタグを表示する方法について教えてください。
- JavaScriptの基礎知識がありますが、Selectboxのvalueを取得して条件分岐し、表示を切り替える方法がわかりません。
- 以下のコードで試してみましたが、更新しないと表示が変わりません。どのように修正すれば良いでしょうか？
- ベストアンサー
javascriptでselectboxのvalueを取得し、特定のv
javascriptでselectboxのvalueを取得し、特定のvalue値により、「<input type="text" name～>」をブラウザに表示させたいのですが、やり方がわかりません。 javascriptについて素人です。 jQUERYを使用して、phpのようにif文を追加したらいけるのかなと思って下記のようにやってみたのですが、更新しないと変わりませんでした。。 どなたかお力を貸して下さい！どうか宜しくお願い致します！ ========================================== <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta name="robots" content="noindex,nofollow" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="/admin/js/jquery-1.2.3.js" ></script> <script type="text/javascript"> $(function() { hogehoge = $("#abcdefg").val(); if(hogehoge !== '3'){ $('#hijklmn').hide(); } }); </script> </head> <body> <form method="post" action="/admin/～"> <select id="abcdefg"> <option value="1">aaaaaaaa</option> <option value="2">bbbbbbbb</option> <option value="3">cccccccc</option> </select> <div id="hijklmn"> 上のセレクトボックスが3の場合のみ、下記のフォームを表示させたい <input type="text" value="ああああああああ" /> </div> </form> </body> </html>
- icon_fanta
- お礼率61% (11/18)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<style type="text/css"> #hijklmn { display: none; } </style> <script type="text/javascript"> $(function() { $("#abcdefg").bind("change", function () { if ($(this).val() == '3') $('#hijklmn').show(); else $('#hijklmn').hide(); }) }); </script> jqueryならこんな感じでしょうか。
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
jqueryはよく知りませんが… $(function()～の内容は、最初にしか実行されないはずなので、selectboxの値が変わる毎に実行するようにしないとうまくいかないのと、その場合はhide()だけでなくshow()も設定しておかないとならないのでは？ $(function() { $("#abcdefg").change(function() { if($("#abcdefg").val() == 3) $('#hijklmn').show(); else $('#hijklmn').hide(); }).change(); }); みたいな感じ？
お礼
ご教授有難うございました！ 大変助かりました！
関連するQ&A
- このソースどういう意味ですか【JavaScript】
<HTML> <HEAD> <TITLE>JavaScript Sample</TITLE> <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> </HEAD> <BODY> : <INPUT TYPE="button" VALUE="OK" onClick="～"> : </BODY> </HTML> このソースの中の <META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript"> の部分ってどういう意味ですか？ 特にTypeとHTTP-EQUIVの部分については個別で詳しく知りたいです。 回答よろしくお願いします。
- ベストアンサー
- JavaScript
- このJavaScriptはなんか早い・・・
<html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイマー</TITLE> </head> <body> <script language="JavaScript"><!-- myCnt = 0; myTim = 0; function myGo(){ mySelect = document.myForm.myMenu.selectedIndex; myCnt = eval(document.myForm.myMenu.options[mySelect].value); myTim = setInterval("myTimer()",1000); } function myTimer(){ myCnt = myCnt-1; document.myForm.myFormSec.value = myCnt + " 秒"; if (myCnt == 0){ clearInterval(myTim); alert("制限時間を終了しました。"); } } // --></script> <CENTER> <form name="myForm"><select name="myMenu" size="1"> <option value="180">時間制限は？ </option> <option value="600">10分 </option> <option value="300">５分 </option> </select> <input type="button" value="GO!" onclick="myGo()"> あと<input type="text" size="15" name="myFormSec"> です。</form> </CENTER> <form> <center><input type="button" value="閉じる" onclick="window.close()"> </center> </form> </body> </html> 上のものを実行させると、なぜかスピードが早くなってしまいます。 どうすればいいのでしょう。 お願いします。
- ベストアンサー
- JavaScript
- スクレイピングした内容をvalue値に入れたい
下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】 上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果 → 東京 ************************************** 【出来なかったこと】 これを、<input type="text" name="tx" value="東京"> のような形でフォーム内に取り入れることを考えています。 しかしながら、下記のようにうまくいきません。 ●●だめ その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果 → 表示されず ●●だめ その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果 → 表示されず 【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューの値を読み出す方法
セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript"> <!-- function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; } function writePrice() { document.write(price);//通常価格表示 document.write(mprice);//会員価格表示 } //--> </script> </head> <body> <script type="text/javascript"> <!-- var price = '20000'; //通常価格 //--> </script> <script type="text/javascript"> <!-- var mprice = price * 0.9; //会員価格 writePrice(); //--> </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- javascript ＋ php でエラー
エラーを取り除くことができず、困っています。 助けてください。 下記のようなコードで、PHPからjavascriptに文字列を渡しているのですが、 文字列に改行コードがあるとエラーになってしまいます。 (改行コードがない場合はエラーはでません) 文字コードはEUC-JP、改行はLFとしています。 エラーの原因と、対策を教えてください。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function sampl(str) { alert(str); } //--> </script> </head> <body> <form method="post" action="#"> <?php $str = "テスト\n改行あり"; ?> <input type="button" value="実行" onClick="sampl('<?=$str?>')"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 別URLからのJSON取得がうまくいかないので教えてください
楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>
- ベストアンサー
- JavaScript
- jQuery if文の条件分岐 (。ノдヽ。)
セレクトボックスで「2012年８月10日・11日」のみを入力不可にしてあげたいのですが、条件がうまく設定できずに困っています。 入力不可にはなるのですが、どうしても2012年8月以外の月でも入力不可になってしまいます。 どなたか、お知恵を貸して下さい(*_ _) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> </head> <body> <script type="text/javascript"> <!-- $(function(){ if($("select[name='depyear'] option[value='2012']")) {if($("select[name='depmonth'] option[value='8']")) {$("select[name='depday'] option[value='10']").attr("disabled","disabled"); $("select[name='depday'] option[value='11']").attr("disabled","disabled"); } }else{}; }); --> </script> <table> <tr> <td bgcolor="#ffffff"> <select size="1" name="depyear"> <option value="2012">2012</option> <option value="2013">2013</option> </select> 年 <select size="1" name="depmonth"> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> 月 <select size="1" name="depday"> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> </select> 日</td> </tr> </table> </body>
- ベストアンサー
- JavaScript
- フレーム内 ( 子HTML ) からフレーム外 ( 親HTML ) のコンボボックスをJavaScriptで操作する方法は？
下記のようなHTML(抜粋)のフレーム内(子)から、フレームの外側(親)のコンボボックスの値を変更(現在は「起」が選択されていますが、例えば、これを「承」に変更)したいのですが、JavaScriptをどのように記述すればよいでしょうか？ Top.Hoge ( または、Parent.Hoge ) の後の書き方がわかりません。 (手持ちの書籍は一通り調べてみたのですが、探し方が悪いのか・・・？) ご存知の方、コメントを頂けると助かります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" Content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="JavaScript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>題名</title> ........(略)........ <form name="form2"> // ↓以下、コンボボックス ( ドロップダウンリストボックス？ ) <select name="Hoge" onchange="FunctionName(Args.......(略).........)"> <option value="0" selected>起 <option value="1 " > 承 <option value="2 " > 転 <option value="3 "> 結 </select> </form> <tr><td colspan="3" align="center"> <iframe width="1200" height="800 "src="/........(Path)......../Hoge.html"></iframe> </td></tr>
- ベストアンサー
- JavaScript
お礼
そのままのコードでいけました！ やはり基本も知らずに無謀なことをするのはよくないですよね・・・。。 本当に助かりました！有難うございました！