セレクトボックスの値チェックでうまく分岐できない問題

2010/12/22 00:31

このQ&Aのポイント

セレクトボックスの値チェックでうまく分岐できない問題への対処方法を教えてください。
セレクトボックスのvalueが0以外でも、$(this).val() == '0'がtrueになる問題があります。
全てのセレクトボックスのvalueを0以外にしても分岐ができない問題が発生しています。どのように対処すればよいでしょうか？

dcx147
お礼率33% (214/636)

JavaScript
回答数3
ありがとう数5

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

my--
ベストアンサー率89% (91/102)

2010/12/23 19:52 回答No.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 = ''; // 使い終わったら空にする　} } 分かりやすくなったのかは微妙ですが。

質問者

お礼 2010/12/24 20:07

お返事ありがとうございます。コメントまでつけていただいて理解を深める事ができました！おかげさまで問題解決です。本当にありがとうございました！

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

my--
ベストアンサー率89% (91/102)

2010/12/23 09:40 回答No.2

<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値を直接見てやればいいと思います。

質問者

お礼 2010/12/23 17:39

ありがとうございます。思うような0判定ができました！確かにこのようにした方が楽に操作できますね。文字の連結がうまくいかなくなってしまったのですがここはどのようにすれば回避できますでしょうか？ if (i >= selectList.length - 1) { var str = ''; str += this.value;//←イメージ的には131という文字列にしたい alert(str);//←最後のセレクトボックスで選んだ値だけ表示される //$('#view').csv2table('./data/Book' + str + '.csv');//←ファイル名に利用したいです }

ログインすると、全ての回答が全文表示されます。

fujillin
ベストアンサー率61% (1594/2576)

2010/12/22 16:01 回答No.1

回答がないみたいなので… 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">  </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>

質問者

お礼 2010/12/22 19:40

お返事ありがとうございます。タイポミスがありました。ややこしくなってしまい申し訳ございません。 >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> 上記のようにして試してみましたがエラーになってしまうのですがどのようにすればいいでしょうか？

ログインすると、全ての回答が全文表示されます。