- 締切済み
jquery セレクトボックス
jqueryについて質問させて頂きます。 今予約フォームを作成しているんですが、下記のような機能をつけたいんです。。 セレクトボックスは、1.「年月日」2.「時間」の2つあり、 セレクトボックス1で年月日を選択したさいに、土日を含む場合と平日の場合で、 セレクトボックス2に表示される内容を変えたいのです。 現状は、とりあえず日にちの表示はできました。。 後は土日か平日かを取得してセレクトボックス2の内容を変えたいのですが。。。 参考になりそうなサイトや、ご意見を頂きたいです。。 宜しくお願いします。。。
- HR1002
- お礼率80% (4/5)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- sekibunx
- ベストアンサー率61% (8/13)
年月日の表示(取得)が出来ているのなら， あとは年月日から曜日を求めてやればいいわけですね． 日付と曜日の変換は以下のサイトが参考になります． 「イヌでもわかるJavaScript講座」 http://www.red.oit-net.jp/tatsuya/java/birthday.htm サンプルは以下の様になります． 土日か平日かによってメッセージを変えています． セレクトボックスでしたら，条件分岐のところで選択項目を変化させてやれば良いです． 日付のフォーマットは「yyyy/mm/dd」であることを前提に作成していますので， 実際にはエラー処理等を加えてください． <script type="text/javascript"> $(function() { $('#date').change(function() { date = $('#date').val().split("/"); day = new Date(date[0], date[1]-1, date[2]).getDay(); if(day > 0 && day < 6){ val = "平日です(" + day + ")"; }else{ val = "土日です(" + day + ")"; } $('#time').val(val); }); }); </script> </head> <body> <form> 日付選択<input type="textbox" id="date" value="2010/11/12"><br> 時間帯選択<input type="textbox" id="time"> </form> </body>
関連するQ&A
- セレクトボックスで選択された内容での切り替え
こんにちは。 日にちを選択するセレクトボックスAと、 時間を選択するセレクトボックスB、Cを用意します。 はじめはAとBが表示されている状態です。 Aを選択したときに、 Aのボックスの中身が土日ならば、Bを消して（display：none）Cを表示させ、 Aのボックスの中身が平日ならば、そのままBを表示させたいです。 何度も日にちを変更してもB、Cの切り替えをおこないたいんです。。 しかも同じものを3つ用意したいんです。 一つ目はなんとか動くんですが、 二つ目と三つ目がうまく動きません。 一つ目のAが平日の場合だと、二つ目と三つ目のAが土日であっても平日の表示 （この場合セレクトボックスBが表示）されてしまいます。。。 初心者です。。なにかアドバイスなどいただけませんでしょうか？？ 書き方も手探りなんで、ぐちゃぐちゃかと思います。。赤を入れて頂けると幸いです。。 現状はこんな感じです。。 select.mfpはセレクトボックスA .time0１はセレクトボックス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> 解りづらくてすみません。。 宜しくお願いします。
- 締切済み
- JavaScript
- セレクトボックスの表示方法について
フォームなので使われるセレクトボックスについてですが、 ↓矢印を押すとセレクトボックスの内容一覧が表示されますよね。 その表示がまれに上側に出てしまうことがあるのですが、 その表示を絶対に下側に出るように指定することって出来ますか？ ご存知方がいらっしゃいましたら、教えて下さい。 よろしくお願い致します。
- 締切済み
- その他（インターネット・Webサービス）
- セレクトボックス自動表示
セレクトボックスの自動表示についてわからないことがあり、投稿させていただきました。 内容は 数字のセレクトボックスを複数つくり、その複数セレクトボックスの数字を全部足した合計の数を表示させ、さらに合計の数字の分だけ別でセレクトボックスを表示させるという内容です。 例 1つ目のセレクトボックス 012・・・89 2つ目のセレクトボックス 012・・・89 とあり、1つめのセレクトボックスを2とし、２つめのセレクトボックスも2とした場合、 合計は4になります。 その後また別のセレクトボックスを4つ表示させるといったことをしたいのですが、記述方法がわかりません。 お分かりの方がいらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- JavaScript
- Jquery セレクトボックス追加
現在jqueryにて、セレクトボックスchangeの値でセレクトボックスを追加するというものを作っています。 わからない点がいくつかあり、ご質問させていただきました。 <select name="num" id="num"> <option value="1">A</option> <option value="2">B</option> <option value="3">C</option> <option value="4">D</option> <option value="5">E</option> </select> というselectboxがあったときに、changeイベントで常に値をとっています。 $('#num').change(function(){ var numTotal = eval($('#num :selected').val()); $('#num1 > select').remove(); for(i = 1; i <= numTotal; i++) { $('#num1').append($('<select name="num1['+ i +']" class="num1">')); for(no = 1; no <= 99; num++) { $('#num1').append('<option value="'+ no +'">'+ no +'</option>'); } $('#num1').append($('</select>')); } }); と記述をしているのですが、 numで5を選択すると5個分selectboxは表示されます。 ですが、optionをnoで回しているとnumで選択した数ぶんループしています。 またnumでの値で表示されたslectbox(num1)2つめ以降から様子が変わり、noのループ数が1つずつ減っていきます。 例：numで5を選択 num1[0]では99までの数字が5回表示され、num1[1]だと99までの数字が4回表示され、num[2]だと99までの数字が3回表示されてしまいます。 これを正常に各num1[0]、num1[1]は99までの数字を1回のみに表示させるにはどうしたらよいでしょうか？ 悩んでしまったため、投稿させていただきました。 どなたかご教授いただけないでしょうか？
- 締切済み
- JavaScript
- セレクトボックスについて
セレクトボックスで例えば0～9を選択できるように設定した場合、普通は最初の「0」が表示されますが、1～9を最初に表示したい場合はどうすればいいでしょうか？並び順はかえずに、 ０ １ ２ ３←ここを初期に表示したいです ４ ・ ・ ・ わかりにくくてすみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- セレクトボックスについて
現在、PHP画面を使って登録画面を作成しています。 必要事項を打ち込んだら、「確認」のボタンを押し、ページジャンプして 打ち込んだ内容を確認させその内容でよければ「登録」ボタン、 修正したければ「修正」ボタンといった流れで、修正ボタンを押すと 必要事項を打ち込んだ画面に戻るようにしているのですが、 その際、セレクトボックス(<select>)に最初に打ち込んだ内容を表示させたいのですが どうしたらいいのでしょうか？ (最初にセレクトボックスで「男」を選択していたら修正で戻っても「男」が選択されているようにしたい) input typeのtextで打ち込んだ内容はセッションと変数を使ってvalueに値を入れたら 表示することができたのですが… 回答お待ちしています。
- ベストアンサー
- PHP
- ｊQueryを利用したフォームについて
jQueryを利用したフォームに http://kachibito.net/web-design/ideal-forms.html 以下を組み込みたいと思います。 セレクトボックス変更時に内容を切り替える。 http://javascript.maxux.com/js033.htm うまく組み込めず困っています。 どうかお教えください。
- ベストアンサー
- JavaScript
- セレクトボックスのデータをリストボックスへ書き出す
javascript初心者です。よろしくお願いします。 まず年月日を３つのセレクトボックスで作成する。 追加ボタンを押すと、選択した年月日のデータをリストボックスに書き出すことができる。 ※ここでリストボックスのサイズは３に指定しておき、項目が３以上の場合はスクロールさせる。 さらに削除ボタンを作成し、リストからデータを削除できるようにする。 以上のような仕組みを作りたいのですが．．． どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
- Javascriptを使ったセレクトボックスでPHPの変数を表示させるには？
下記のページに書かれている通り、 選択肢(1)によって、選択肢(2)の内容が変わるようにしたのですが、 http://www.ksknet.net/javascript/post_54.html 内容を、PHPでデータベースに保存して更新を行なう時に、 選択肢(2)のセレクトボックスで選んだ内容を 表示させる方法がわかりません。 ■やりたいこと 上記ページのスクリプトで、 選択肢(1)を「果物」、選択肢(2)を「みかん」にして、 MySQLに保存して、更新を行なった際、 下記のように更新が行なえるようにしたい。 【選択肢(1)で選んだモノが最上位に表示される】 （例：$select1=「果物」で保存した場合、「果物」が最上位） <select name = "selectName1" onChange="functionName()"> <option value = "$select1">$select1</option> <option value = "果物">果物</option> <option value = "野菜">野菜</option> <option value = "野菜">野菜</option> </select> 【選択肢(2)で選んだモノが最上位に表示される】 （例：$select2=「みかん」で保存した場合、「みかん」が最上位） <select name = "selectName2"></select> ※このフォームに、$select2を入れて、$select2の内容を表示し、 他の選択肢(2)の内容も表示したいのですが、方法がわかりません。 少しわかりにくい質問かも知れませんが、 どうしても実現したいことなので、是非とも宜しくお願いします。
- ベストアンサー
- JavaScript
- jquery select要素のdisplay:noneについて
jqueryを使用して、要素の表示・非表示をさせたいのですが、 下記、コードで問題が出ています。 <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".dis").toggle( function(){ $("table.displayArea").attr("style","display:block"); }, function(){ $("table.displayArea").attr("style","display:none"); } ); }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html> aタグをクリックするとselectフォームがちゃんと表示されるんですが、 再度クリックしてもselectフォームが非表示にされません。 試しに、フォームでなくただのテキスト文字にしてみると、 ちゃんと、表示・非表示がうまくいきます。 その他のフォーム要素も試してみたのですが、問題ありませんでした。 なのでselect要素だけちゃんと非表示されないようです。 何が原因なのかお分かりになる方がいらっしゃいましたら、 ご教授いただけると幸いです。
- ベストアンサー
- JavaScript
お礼
わかりやすいお答、ありがとうございます！ 参考にさせて頂きます！！