• 締切済み

jquery-コンボボックス-選択状態

3つのコンボボックスをjqueryを使って連動させております。 連動するコンボボックスを選択しボタンを押下すると 自画面へ遷移します。 その際に先ほどの画面で選択したコンボボックスを選択状態に したくて困っております。 html <select name="area" id="parent"> <option value="1">エリアを選択</option> <option value="2">北海道・東北</option> <option value="3">関東</option>       ・・・ </select> <select name="pref" id="child"> <option class="sub_1" value="1">都道府県を選択</option> <option class="sub_2" value="1">都道府県を選択</option> <option class="sub_2" value="2">北海道</option> <option class="sub_2" value="3">青森</option> <option class="sub_2" value="4">岩手</option> <option class="sub_3" value="1">都道府県を選択</option> <option class="sub_3" value="14">東京</option> <option class="sub_3" value="15">神奈川</option>       ・・・ </select> <select name="region" id="grandsun"> <option class="sub_1" value="1">地域を選択</option> <option class="sub_2" value="1">地域を選択</option> <option class="sub_2" value="0101">札幌</option> <option class="sub_3" value="1">地域を選択</option> <option class="sub_3" value="0201">青森市</option> <option class="sub_3" value="0202">弘前市</option> <option class="sub_3" value="0203">八戸市</option>       ・・・       ・・・ </select> function makeSublist(parent,child,isSubselectOptional,childVal){ $("body").append("<select style='display:none' id='"+parent+child+"'></select>"); $('#'+parent+child).html($("#"+child+" option")); var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); childVal = (typeof childVal == "undefined")? "" : childVal ; $("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected'); $('#'+parent).change( function(){ var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); $('#'+child).trigger("change"); $('#'+child).focus(); } ); } $(function(){ makeSublist('child','grandsun', true, ''); makeSublist('parent','child', false, '1'); });

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

@value=...の @ は余分ですね。 それは、直すとして、 画面遷移してもどってきた時、復元するには cookieとかwebstrage使えばよい。 webstrage使用の例 $(function(){ if(localStorage.parent) $("#parent").val(localStorage.parent); makeSublist('parent','child',true,localStorage.child); makeSublist('child','grandsun',true,localStorage.grandsun); $(window).unload(function(){ localStorage.parent = $("#parent").val(); localStorage.child = $("#child").val(); localStorage.grandsun = $("#grandsun").val(); }); });

akira215
質問者

お礼

ご回答頂きありがとうございます。 頂きましたソースを使わせて頂きましたが うまく行きませんでした。 想定しているのは ■初期表示時  選択してください(エリア)選択してください(都道府県)選択してください(地域)  エリア&都道府県&地域(コンボボックス)が連動  エリア&都道府県&地域を選択 ■Post時(自画面表示時)  前画面で選択したエリア&都道府県&地域が選択された常態になる。  エリア&都道府県&地域(コンボボックス)が連動  上記、■初期表示後のエリアには前回選択したエリア 都道府県&地域が空のプルダウンになってしまいます。 頂いたソースを追加した場所が悪いのでしょうか? ご教授頂きますでしょうか? ---同じソースに頂いたSrcを記載しました---------- function makeSublist(parent,child,isSubselectOptional,childVal){ $("body").append("<select style='display:none' id='"+parent+child+"'></select>"); $('#'+parent+child).html($("#"+child+" option")); var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); childVal = (typeof childVal == "undefined")? "" : childVal ; $("#"+child+' option[value="'+ childVal +'"]').attr('selected','selected'); var parentValue = $('#'+parent).attr('value'); alert(parentValue+"kawabata"); $('#'+parent).change( //$('#'+parent).changesOccurred( function(){ var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); $('#'+child).trigger("change"); $('#'+child).focus(); } ); } $(function(){ makeSublist('child','grandsun', true, ''); makeSublist('parent','child', false, '1'); }); $(function(){ if(localStorage.parent) $("#parent").val(localStorage.parent); makeSublist('parent','child',true,localStorage.child); makeSublist('child','grandsun',true,localStorage.grandsun); $(window).unload(function(){ localStorage.parent = $("#parent").val(); localStorage.child = $("#child").val(); localStorage.grandsun = $("#grandsun").val(); }); });

関連するQ&A

  • セレクト選択時にチェックボックスをオフにしたい

    フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>

  • VBA IE コンボボックスに値を入れる方法

    こんばんは。 VBAでIEの操作をしています。 --------------------------------------------------------- <tr> <th><span class="asterisk">*</span>&nbsp; <label for="ind">業種:</label></th> <td> <select name="industry" id="ind" tabindex="1800"> <option value="" class="title">[業種を選択]</option> <option value='1'>銀行/金融/不動産 <option value='2'>コンピュータ関係(管理/インターネット) <option value='3'>コンピュータ関係(ハードウエア) </select> </td> </tr> --------------------------------------------------------- 元のソースが↑なのですが、 objIE.document.all("industry")(0).Value = "サービス" としても、[業種を選択]がコンボボックスに投入されてしまいます。 コンボボックスに銀行/金融/不動産を入れる場合は どのようなVBAコードを書けばいいのでしょうか? ご回答よろしくお願いします。

  • HTMLのコンボボックスとの関連

    HTMLの同ページ内にコンボボックスAとコンボボックスBがあるとして、 <!-- JavaScript部------ --> <script language="javascript"> <!--// function cmdCtr() { if (document.forms[0].A.value=='a2'){ document.forms[0].B.disabled=true; document.forms[0].B.selectedIndex=0; document.forms[0].B.value="b1"; }else{ document.forms[0].B.disabled=false; } } //--> </script> <!-- HTML部----------- --> <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとBボックスが選択出来なくなり、Bボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか? ちなみに、AボックスBボックス両方がきちんと選択されている場合はエラーは起きません。

  • コンボ(?)ボックスの項目の削除方法

    タイトルどおりの質問なんですが、 コンボ(?)ボックスのある項目を選択した状態で「削除」ボタンを押すことにより その項目を削除する。というプログラムを作成しています。 ちなみにコードは以下のようになっています。 <INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();"> <SELECT Name="Option" MULTIPLE SIZE=10 > <OPTION value="01">1</OPTION> <OPTION value="02">2</OPTION> <OPTION value="03">3</OPTION> <OPTION value="04">4</OPTION> <OPTION value="05">5</OPTION> <OPTION value="06">6</OPTION> <OPTION value="07">7</OPTION> <OPTION value="08">8</OPTION> <OPTION value="09">9</OPTION> <OPTION value="10">10</OPTION> </SELECT> function deldata(){ ・・・ ・・・ } この function deldata()の中の処理方法について教えてください。 初歩的な質問と思いますが、よろしくお願いします。

  • セレクトボックスの連動処理について

    PHPに投稿すべき内容かもしれませんが、 こちらに投稿します。以下URLを参考にセレクトボックスの 連動処理を実行させています。 やりたい事は以下になります。 ・PHPにてフォーム(親-子のセレクトボックス)を記載し、 親-子を連動させる仕組を複数作成する為です。 http://www.skuare.net/test/jdependent.html こちらのページに記載されている内容で、一つの関連付けされている セレクトボックス(親-子-孫)については、連動処理する事が確認できましたが、 例えば以下のように関連付けされているセレクトボックスが2つある時に 2個目のセレクトボックスの選択や表示がされません。 <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> おそらくスクリプト記載部分の $(document).ready(function(){ $('#id2').dependent({ parent:'id',//親のid名 group: 'selectable' }); }); #id2辺りを触る必要があるのだとは思うのですが、 同じ内容のセレクトボックスをPHPに複数記載した時に、 どのようにスクリプトを変更する必要があるかが解らず 非常に困っております。どなたか教えていただければ 幸いです。 ※JavaScriptはまだ触り始めの為、初心者です。

  • セレクトボックスで選択された内容での切り替え

    こんにちは。 日にちを選択するセレクトボックスAと、 時間を選択するセレクトボックスB、Cを用意します。 はじめはAとBが表示されている状態です。 Aを選択したときに、 Aのボックスの中身が土日ならば、Bを消して(display:none)Cを表示させ、 Aのボックスの中身が平日ならば、そのままBを表示させたいです。 何度も日にちを変更してもB、Cの切り替えをおこないたいんです。。 しかも同じものを3つ用意したいんです。 一つ目はなんとか動くんですが、 二つ目と三つ目がうまく動きません。 一つ目のAが平日の場合だと、二つ目と三つ目のAが土日であっても平日の表示 (この場合セレクトボックスBが表示)されてしまいます。。。 初心者です。。なにかアドバイスなどいただけませんでしょうか?? 書き方も手探りなんで、ぐちゃぐちゃかと思います。。赤を入れて頂けると幸いです。。 現状はこんな感じです。。 select.mfpはセレクトボックスA .time01はセレクトボックスB .time02はセレクトボックスCです。 $("select.mfp").change(function () { var str = $("select.mfp option:selected").text(); var STR =str.charAt(12); // if (STR=="土" || STR=="日"){ // $(this).parent().children(".time02").css( 'display', 'block' ) // $(this).parent().children(".time01").css( 'display', 'none' ); // }else{ // $(this).parent().children(".time01").css( 'display', 'block' ) // $(this).parent().children(".time02").css( 'display', 'none' ) // } }).change(); -------HTML------------ <tr class="mfptr"> <td id="second"><!--<input type="hidden" name="ご予約日[join]年+月+日+時間+分" value="" />--> <p class="float">●第一希望 </p> <script type="text/javascript" src="./contact/commons/choice_date.js"></script> (↑これで日付のセレクトボックスを生成しています。) <select name="時間" class="mfp time01"> <option value="時間">時間</option> </select> <select name="時間" class="mfp time02"> <option value="時間2">時間2</option> </select> </td> </tr> 解りづらくてすみません。。 宜しくお願いします。

  • 2つのコンボボックスの連携

    以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>

  • セレクトボックスの操作について

    セレクトボックスの操作について 3つのセレクトボックスのうち、どれかを変更すると同じテキストのものに 残りの2つのセレクトボックスを変更したいと思っております。 同じテキストが無ければ<option value="">----------</option>をcheckedにしたいと 考えているのですが、どなたかご教授いただければと思います。 [変更したいhtml] <select name="house_kouzou_a" id="house_kouzou_a" class="a"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_b" id="house_kouzou_b" class="b"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_c" id="house_kouzou_c" class="c"> <option value="">----------</option> <option value="1">木造</option> <option value="3">鉄筋</option> <option value="4">その他</option> </select>

  • SELECT結果から動的にコンボボックスを作りたい

    SELECT結果から動的にコンボボックスを作りたい SELECT結果を元に、コンボボックスを作りたいと思っています。 テーブル「bunsyo_tbl」から、3行の結果を受け取った時、 3回だけ回るループの中で動的にhtmlを作成し、コンボの行数を増やす、 といった事を実現させたいのですが、ループ内でhtmlを作成する部分が上手く行きません。 ご教授頂きたく質問いたします。 当方の環境はOSはWinXP SP3、 ?Apache 2.0.63 ?PHP 5.2.6 ?Mysql 5.0.51b です。 テーブル「bunsyo_tbl」の内容は bunsyo_id | bunsyo_name | maker 2345 | 鋼材購入明細 | 1 3322 | 耐圧試験結果 | 1 3442 | 腐食箇所リスト| 1 PHPとhtmlのソースは最後に書きます。(長いので) 目的は、PHP変数$temphtml の中身を、 <option value="2345">鋼材購入明細 </option> <option value="3322">耐圧試験結果 </option> <option value="3442">腐食箇所リスト</option> と、して、html文の中で<? $temphtml ?>で呼びコンボの行数を増やす事です。 WAMPに触れ2週間が経つ初心者です。 本質問前に十分に調べ、確認したつもりではいますが、 的外れな質問や、意味の通らない文章になっていましたらすいません。 よろしくお願いします。 -------------------- <?php (接続部省略) require_once("connect_db.php"); // select実行 $sql = "SELECT bunsyo_id,bunsyo_name FROM bunsyo_tbl WHERE maker = 1" ; $result = executeQuery($sql); //結果セットの行数を取得する。 $rows = mysql_num_rows($result); //コンボボックスの不定部分のhtml作成 if($rows2){ while($row = mysql_fetch_array($result)) { print($row['bunsyo_id']); print($row['bunsyo_name']); $temphtml .= "<option value=" .$row["bunsyo_id"]. ">" .$row["bunsyo_name"]. "</option>"; print($temphtml); } $msg = $rows."件のデータがあります。"; }else{ $msg = "レコード0件"; } ?> <!--コンボボックス作成。初期は空白選択--> <select name="doc_comb" size="1"> <option value="" selected="selected"></option>     <? $temphtml ?> </select>

    • ベストアンサー
    • PHP
  • 条件により押せないボタンを作りたい

    2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるが どちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですが どのようにすれば可能でしょうか? <script type="text/javascript"> jQuery(function() { jQuery('#change_btn').click(function() { jQuery.post('price.php', { size : jQuery('#size').attr('value'), days : jQuery('#days').attr('value') }, callBack); }); }); function callBack(data) { jQuery('#change_area').html(data); } </script> <form action="" id="form1" method="post"> <select name="size" id="size"> <option value="">---選択してください---</option> <option value="s1">サイズ01</option> <option value="s2">サイズ02</option> <option value="s3">サイズ03</option> </select> <select name="days" id="days"> <option value="">---選択してください---</option> <option value="d6">6日</option> <option value="d8">8日</option> </select> <input type="button" id="change_btn" value="検索" /> </form>