セレクトボックスの値チェックでうまく分岐できない問題
- セレクトボックスの値チェックでうまく分岐できない問題への対処方法を教えてください。
- セレクトボックスのvalueが0以外でも、$(this).val() == '0'がtrueになる問題があります。
- 全てのセレクトボックスのvalueを0以外にしても分岐ができない問題が発生しています。どのように対処すればよいでしょうか？
- ベストアンサー
教えてください！
セレクトボックスが3つあります。 1つめのセレクトボックスがid=select1 2つめのセレクトボックスがid=select2 3つめのセレクトボックスがid=select3 valueはそれぞれ異なりますが0～3か0～5といった具合です。 全てのセレクトボックスのうち1つでもvalueが0(未選択)のものがあれば処理を中止し そうでなければ何か処理をするという分岐がしたいのですがうまくいきません。 具体的には、全てのセレクトボックスのvalueを0以外にしても$(this).val() == "0"がtrueに なってしまいます。どのようにすれば分岐できますでしょうか？ ソースは以下の通りです。 $(function() { var cnt = 4; var status = false; for (var i = 1; i < cnt; i++) { $("select#item" + i).change(function() { var str = ""; $("select option:selected").each(function() { status = true; if ($(this).val() == "0") { status = false; $(".res").html('値に0がある'); } str += $(this).val(); }); }); } if (status) { //全てのセレクトボックスでvalueが0でなければ何かする alert(str); } });
- dcx147
- お礼率33% (214/636)
- JavaScript
- 回答数3
- ありがとう数5
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>>No.2 お礼 var selectList = $('#box select'); selectList.change(function() { var str = ''; // select要素ごとに呼ばれる関数の外側で宣言 selectList.each(function(i) { if (this.value === '0') { str = ''; // 空にして中断 return false; // 中断 } str += this.value; // 0でなければ連結 if (i >= selectList.length - 1) { // 末尾要素まで到達 alert(str); // 選択項目すべてが連結された文字列 } }); }); 関数式が入れ子になってて分かり辛くなってますかね。 -------------------------------------------------------- var selectList = $('#box select'); selectList.change(changeCallback); function changeCallback() { selectList.each(eachCallback); } var str = ''; // select要素ごとに呼ばれる関数の外側で宣言 function eachCallback(i) { if (this.value === '0') { str = ''; // 空にして中断 return false; // 中断 } str += this.value; // 0でなければ連結 if (i >= selectList.length - 1) { // 末尾要素まで到達 alert(str); // 選択項目すべてが連結された文字列 str = ''; // 使い終わったら空にする } } 分かりやすくなったのかは微妙ですが。
その他の回答 (2)
- my--
- ベストアンサー率89% (91/102)
<div id="box"> <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> <select> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </div> var selectList = $('#box select'); selectList.change(function() { selectList.each(function(i) { if (this.value === '0') { //alert('値に0がある'); return false; // 中断 } if (i >= selectList.length - 1) { // 末尾要素まで到達 //全てのセレクトボックスでvalueが0でなければ何かする alert('値に0がない'); } }); }); jQueryオブジェクトにピックアップされた要素すべてに対し changeメソッドに渡した関数が実行されるよう処理してくれますから セレクタを工夫されてみてはどうでしょう。 選択されている項目の方はselect要素のvalue値を直接見てやればいいと思います。
お礼
ありがとうございます。思うような0判定ができました！ 確かにこのようにした方が楽に操作できますね。 文字の連結がうまくいかなくなってしまったのですが ここはどのようにすれば回避できますでしょうか？ if (i >= selectList.length - 1) { var str = ''; str += this.value;//←イメージ的には131という文字列にしたい alert(str);//←最後のセレクトボックスで選んだ値だけ表示される //$('#view').csv2table('./data/Book' + str + '.csv');//←ファイル名に利用したいです }
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… id=select1と書いてあるけれど、コードのほうは$("select#item" + i)となっているのはタイポでしょうか？ onchangeでチェックをすると、（デフォルトがvalue=0と想定して）入力中に何度もチェックがかかってしまうので、formのonsubmitなどを利用するほうがよくありませんか？ ライブラリを使用してはいませんが、こんな要領でいかがでしょうか。 (id指定にするとかalertを変更するなど適宜修正してください） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function check(form) { var i, count = 4, mes = "", frm = form.elements; for (i=1; i<count; i++) if (frm["select" + i].value == "0") { mes += (mes?"\n":"") + "select" + i + "の値が0です"; } if (mes) { alert(mes); return false; } //3箇所とも0でない場合の処理 alert("ok"); } //--> </script> </head> <body> <form name="form1" action="" method="" onsubmit="return check(this);"> <label>select1: <select name="select1"> <option value="0" selected>0</option> <option value="1">1</option> </select> </label> <br> <label>others : <select name="other"> <option value="0" selected>0</option> <option value="1">1</option> </select> </label> <br> <label>select2: <select name="select2"> <option value="0" selected>0</option> <option value="1">1</option> </select> </label> <br> <label>select3: <select name="select3"> <option value="0" selected>0</option> <option value="1">1</option> </select> </label> <br> <input type="submit" value="実行"> </form> </body> </html>
お礼
お返事ありがとうございます。 タイポミスがありました。ややこしくなってしまい申し訳ございません。 >onchangeでチェックをすると、（デフォルトがvalue=0と想定して）入力中に何度もチェックがかかってしまうので、formのonsubmitなどを利用するほうがよくありませんか？ 確かにその通りなのですがsubmitせず実現したいと思っております。 フォームの値から表示するcsvを選択し最終的にはjqueryを使用しcsvデータの表示を行いたいと思っております。 ※valueが131であれば131.csvを読込むような感じです <form action="" method="get"> <div class="selectBox"> <label for="item1"> 項目1 </label> <select name="item1" id="item1" onchange="return check(this);"> <option value="0">-------------</option> <option value="1">項目1</option> <option value="2">項目2</option> <option value="3">項目3</option> </select> </form> 上記のようにして試してみましたがエラーになってしまうのですがどのようにすれば いいでしょうか？
関連するQ&A
- jquery inputのvalue値を表示解除
jqueryでチェックボックスがチェックされたらvalue値をテキストボックスに表示するプログラムです。 全選択をすると全チェックボックスにチェックが入り全てのvalue値を取得表示します。 [問題点] (1)：まずどれかチェックボックスを選択しておきます。 (2)：次に全選択を選択後、全選択を再び選択する（全解除）と(1)で選択した値がテキストボックスに残ってしまい、チェックが反転した形になってしまいます。 補足：チェックしたらvalue値を取得するのが正常なのですが、この問題点でチェックが外れたらvalue値を取得するに反転してしまう。 [求] 何かヒントになるようなプログラムを教えてもらえないでしょうか？ もしくは原因を教えて下さい。 宜しくお願いします。 以下プログラム ========= $(function(){ //チェックボックス var check = $('input[name="check"]'); var check_flag = false; //全てを選択/解除 var checkall = $('input[name="checkall"]'); //テキストボックス var box = $('input[name="searchBox"]'); //テキストボックスのvalue値 var txt = box.val(); //チェック判定 $.each(check,function(i) { if ($(this).attr('checked')==true) { check_flag = true; return false; } }); //全て選択解除 checkall.change( function(){ //全てチェックする処理 $(this).parents('#check:eq(0)').find(':checkbox').attr('checked',this.checked); //配列生成 var arry = []; //チェックボックスのvalue値を格納 check.each( function(){ arry.push($(this).val()); }); //チェックボックスを一つずつ表示 var i=0; while( i < arry.length ){ //正規表現 var reg = new RegExp( arry[i] + ' ' ); //もしフラグがtrueで且つ //クリックした箇所のvalue値と一致するテキストがボックス内に表示されていたら if( !check_flag && txt.match( reg ) ){ //ボックス内のvalue値削除 txt = txt.replace( reg,'' ); }else{ //それ以外ならクリックした箇所のvalue値+スペースを代入 txt += arry[i] + ' '; } box.val(txt); i++; } }); //各項目チェック check.change(function(){ //クリックした箇所のvalue値取得 var data = $(this).val(); //正規表現 var reg = new RegExp( data + ' ' ); //もしフラグがtrueで且つ //クリックした箇所のvalue値と一致するテキストがボックス内に表示されていたら if( !check_flag && txt.match( reg ) ){ //ボックス内のvalue値削除 txt = txt.replace( reg,'' ); }else{ //それ以外ならクリックした箇所のvalue値+スペースを代入 txt += data + ' '; } //結果を表示 box.val( txt ); }); });
- ベストアンサー
- JavaScript
- テキスト内容の変化でイベント発生
下記のようなコードでイベントを発生したいと考えています。 キーボードによる打ち込みではなく、文章をコピー＆ペーストすることで 「firstBox2」の表示を消し、「secondBox2」を表示させたいと考えています。 ご教授お願いします。 <input id="target_input" type="text" value="" /> <select id="firstBox2"> <option value="select1">-----</option> <option value="select2">------</option> </select> <select id="secondBox2" style="display:none;"> <option value="select1">午前中</option> <option value="select2">2度目以降の利用</option> </select> <script type="text/javascript"> var timer = null; var input = document.getElementById("target_input"); var prev_val = input.value; input.addEventListener("focus", function(){ window.clearInterval(timer); timer = window.setInterval(function(){ var new_val = input.value; if(prev_val != new_val){ document.getElementById('firstBox2').style.display = "none"; document.getElementById('secondBox2').style.display = ""; }; prev_value = new_value; }, 10); }, false); input.addEventListener("blur", function(){ window.clearInterval(timer); }, false); } </script>
- 締切済み
- JavaScript
- 動的セレクトボックスのSelectedについて
以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"><!-- function SelectOption(parentValue, text, title, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; } var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1")); box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1")); box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2")); box1.setChild(box2); window.onload = function() { box2.make("1"); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- option要素の移動が遅い
よくあるSELECTボックスのデータを左右に移動させるスクリプトなのですが、 ボックス（multiple指定）内のデータが1万件ほどある状態で、1000件程度 （またはそれ以上）移動させようとすると遅くて困っています。 スクリプトは以下の通りです。from、toに移動元・先のIDが来ます。 毎回移動先のリストを舐めて重複チェックをしているため、重くなって しまっているのかなと思うのですが…もっと処理を早くする方法がありましたら ご教授いただけないでしょうか。 宜しくお願いいたします。 function addSelectBox(from,to){ var ids = ($("#" + from + " option:selected").val()) ? $("#" + from + " option:selected").val() : "" ; $("#" + from + " option:selected").each(function(){ if($(this).val()=="")return; ids = $(this).val(); addOptions($(this),ids,from,to); }); } function addOptions(elem,ids,from,to){ //重複チェック var isAdd = true; $("#" + to).children().each(function(){ if ($(this).val() == ids) { isAdd = false; } }); if (isAdd) { $('#' + to).append('<option value="' + ids + '">' + elem.text() +'</option>'); $("#" + from + " option:selected").remove(); } }
- ベストアンサー
- JavaScript
- AJAXの計算式の中にIF文を入れて表示したい
下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」をAJAXで表示できます。 ******************************************** 【HTMLフォーム】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" /> + <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】 このjavascriptを改造し、入力した数値についての「足し算の結果」が正の数だった場合には「正の数」、負の数だった場合は「負の数」と表示すべく改造しております。下記の改造を施したのですが、うまく表示されません。 下記の文のどこが誤りか修正頂けませんでしょうか? 宜しくお願い致します。 【JAVASCRIPT(culc2.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "(if((sum > 0) { document.write("正の数"); } else((sum <= 0) { document.write("負の数"); } ))"; } message.innerHTML = textMessage; }
- ベストアンサー
- AJAX
- 複数対応できるチェックボックスONでのテキストフィールド有効化
nameでなくidから値を取得する方法を模索中です。 下記のようにしてみましたが、 「オブジェクトでサポートされていない～」とでます。 どのあたりに問題がありますでしょうか？ <script type="text/javascript"> function fchk(obj,id) { var frm=obj.form; if(obj.checked==true) { /* テキストボックスを有効化（false）*/ for(var i=1; i<=2; i++){ frm.getElementById("t"+i).disabled=false; } } else { for(var i=1; i<=2; i++){ /* 無効化する前に、入力値をクリア */ if(id=='t'){ frm.getElementById("t"+i).value=""; } /* 無効化（true） */ frm.getElementById("t"+i).disabled=true; } } } </script> <form name="form" action="#"> <input type="checkbox" id="c1" name="aaa" value="オン" onclick="fchk(this,'t')" /> <br /> <input type="text" name="aaa" id="t1" value="" size="20" disabled/> <input type="text" name="aaa" id="t2" value="" size="20" disabled/> </form>
- ベストアンサー
- JavaScript
- checkboxにcheckedされない
こちらで初めて質問させていただきます。 JAVASCRIPTにて、ONLOAD時に フォーム内のチェックボックスをデフォルトでONにする処理を 書いているのですが IE以外の環境で動作せず困っています。 ↓処理を行っているfunction function onload(all,tiku) { for(i = 1; i <= 47; i++){ mad=eval('document.form.m_mpref_'+formatNum(2,i)); if (all.indexOf(mad.value,0)>=0) { mad.checked = true; } } for(i = 1; i <= 10; i++){ mad=eval('document.form.m_tiku_'+formatNum(2,i)); if (tiku.indexOf(mad.value,0)>=0) { mad.checked = true; } } } function formatNum(keta, num) { var src = new String(num); var cnt = keta - src.length; if (cnt <= 0) return src; var str = new String; while (cnt-- > 0) str += "0"; return (str + src); } ↓呼び出し元 <body onload="onload('01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,19,20,16,17,18,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47','');"> フォーム内には 以下のようなINPUTが47あります <input type="checkbox" name="m_mpref_01" value="01" /> （つまりチェックボックス付きの都道府県が47あり、 その全てをONLOAD時にallにある番号の県をチェック状態にさせたいのです） IE環境では正常に動作するのですが FIREFOX NETSCAPE MACのIE で確認すると、ONLOAD時デフォルトでチェックが入っていないままの状態です。 これがなぜなのか全く分らないのです。 どなたか見当の付く方宜しければ教示下さい。
- ベストアンサー
- JavaScript
- localStorageでのcheckbox制御
下記記載のプログラムをこちらから改変して作成しました。 http://jsdo.it/twi_masa/hx8D 質問1 保存を押すとtrueかfalseの値が保存されますが、ページ読み込み直後にtrueだったらチェックあり。falseだったらチェックなしの状態にするにはどのように書けばよろしいでしょうか。 質問2 チェックボックス2も1と同様に使いたいのですが、どのように書けばよいのかわかりません。 よろしくお願いします。 <table> <tr> <td>チェックボックス</td> <td> <input type="checkbox" id="checkbox1" value="0">チェック1 <input type="checkbox" id="checkbox2" value="0">チェック2 </td> </tr> </table> <input type="button" value="保存" onclick="hx8D.save();"> <script> var hx8D = function(){ var HX8D = function(){ }; HX8D.prototype = { save : function(){ var elements = document.getElementsByTagName("input"); for(var i=0; i<elements.length; i++){ var type = elements[i].type; var key = elements[i].id; if(type == "text"){ localStorage[key] = elements[i].value; }else if(type == "checkbox"){ localStorage[key] = elements[i].checked; document.getElementsByName("checkbox1")[i].checked = true; } } }, }; return new HX8D(); }(); </script>
- ベストアンサー
- JavaScript
- セレクトボックスに"value"と"word"を付け加えたい。
初めての投稿をさせてもらいます。JavaScript初心者な者で解る方がいらっしゃればご教授のほど宜しくお願いします。 質問させてもらいたい事はこちらのソースに"value"と"word"を付け加えることは出来ますでしょうか？ 外部ファイルには /** * 選択肢クラス * @param parentValue 親の値(null:いつでも表示) * @param text 表示テキスト * @param value 値 * @param style ＣＳＳ(省略可) */ function SelectOption(parentValue, text, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; if(style) { this.style.cssText = style; } }; return this; } /** * セレクトボックスクラス * @param id セレクトボックスID */ function SelectBox(id) { /** * IDに対応オブジェクトを取得 * @return オブジェクトorNULL */ function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } // オプションのリスト var options = []; /** * オプション登録 * @param condition 表示条件 */ this.registOption = function(option) { options[options.length] = option; }; // 子のオブジェクト var child = null; /** * 子のオブジェクトを設定する * @param childObj 子のオブジェクト */ this.setChild = function(childObj) { child = childObj; }; /** * オプション反映 * @param parentValue 親の値(null:全部表示) * ※比較に==を使っているのでundefinedもnullと等しく扱われる。 */ this.make = function(parentValue) { var obj = getObject(); if(obj) { // 選択肢削除 obj.options.length = 0; // 表示すべき選択肢抽出 var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } // 選択肢反映 obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } // 子のオブジェクトにも連鎖反映 if(child) { child.make(obj.value); } } }; return this; } HTMLファイルには <html> <head> <title>セレクトボックス親子関係</title> <script type="text/javascript" src="Select.js" charset="Shift_JIS"></script> <script type="text/javascript"><!-- var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "1")); box1.registOption(new SelectOption(null, "神奈川県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "1")); box2.registOption(new SelectOption("1" , "中央区" , "2")); box2.registOption(new SelectOption("2" , "横浜市" , "3")); box2.registOption(new SelectOption("2" , "川崎市" , "4")); var box3 = new SelectBox("sb3"); box3.registOption(new SelectOption(null, "詳細" , "0", "color:gray;")); box3.registOption(new SelectOption("1" , "一番町" , "1")); box3.registOption(new SelectOption("3" , "みなとみらい", "2")); box1.setChild(box2); box2.setChild(box3); window.onload = function() { box1.make(null); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2" onchange="box3.make(this.value);"></select> <select id="sb3"></select> </form> </body> </html> となっております。
- 締切済み
- JavaScript
- 複数classの取得方法
貴重な場を借りてご質問させていただきます。 <select id="second"> <option value="1" class="c_1 c_2">タイトル</option> </select> $("#second").change(function(){ var $thisVal = $(this).val(); $("#second option").each(function(){ var secondClass = $(this).attr('class'); var secondVal = secondClass + '_' + $thisVal; console.log(secondVal) }); }); jqueryにて上記のclass、c_1とc_2の後にvalueの値をつけたいと思うのですが、 以下のようにしてconsoleで確認するとc_1 c_2_1となってしまい、 片方にしかつかないのですが、どちらともつくようにする方法がございましたら、 是非とも教えていただければと思います。 どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
お返事ありがとうございます。 コメントまでつけていただいて理解を深める事ができました！ おかげさまで問題解決です。本当にありがとうございました！