Q&A
動かなかったので間違いがあればご指摘ください
argetはidがgreenのdivしか指していないので、灰色になるのはgreenのdivだけですが、アラートが3かいでるのと同じように3回処理されています。このサンプルのように問題にならない場合もありますが無駄なことは避けるべきです。ということで、次項のstopPropagationメソッドにつながります。
回答2件
0
並び順がcategory1,2,3,4...という順序になることが保証されているのであれば、
category1,2,3に「category」クラスを付与し、「categoryクラスのchangeイベント」で一元管理することができます。
以下サンプルコード。
※コードは長くなってしまっていますが、category4が増えてもjQueryの修正は不要です。
`
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ function reset(category) { category.empty(); category.append($("<option selected>----</option>")); } /** * カテゴリクラスのチェンジイベント */ $('.category').change(function () { // 今チェンジしたオブジェクトが、カテゴリクラスオブジェクトの何番目かを取得 var index = $(".category").index(this); var child_category = $(".category:eq(" + (index + 1) + ")"); // 子供のオブジェクトが無い場合は処理終了 if (child_category.length == 0) { return false; } // 自分自身より後のカテゴリクラスオブジェクトのオブジェクトを全てreset $(".category:gt(" + index + ")").each(function() { reset($(this)); }); // 自分の子供のカテゴリクラスオブジェクトを更新 call($(this).attr("id"), child_category); }); reset($('#category1')); call(0, $('#category1')); function call(parent_id, category) { ～変更していないので省略～ } }); </script> </script> </head> <body> <div> <select id="category1" class="category"> <option>----</option> </select> <select id="category2" class="category"> <option>----</option> </select> <select id="category3" class="category"> <option>----</option> </select> </div> </body> </html> ` 並び順が保証されていない場合でも、カスタムデータ属性を、各セレクトボックスに追加すれば、同じ方針で対応可能かと思います。http://dresscording.com/blog/html5/custom_data_attribute.html
投稿2014/08/05 05:52
総合スコア696
0
手元で動くことを確認したので再投稿します。
select要素にclass="category"を追加し、resetとcallはそのままで以下のようにしました。
`
<html> <head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ var categories = $('.category'); categories.change(function() { var $this = $(this);</head> <body> <div> <select id="category1" class="category"> <option>----</option> </select> <select id="category2" class="category"> <option>----</option> </select> <select id="category3" class="category"> <option>----</option> </select> <select id="category4" class="category"> <option>----</option> </select> </div> </body> </html> `// 最後の.categoryなら何もしない if ($this.is(':last-child')) return; // チェンジした.categoryのindex var index = categories.index(this); // 後ろの.categoryをすべてreset() $('.category:gt(' + index + ')').each(function() { reset($(this)); }); // 選択したカテゴリーのcategory_id var parent_category_id = $this.find('option:selected').val(); call(parent_category_id, $this.next('select')); }); function reset(category) { category.empty(); category.append($("<option selected>----</option>")); } function call(parent_id, category) { $.ajax({ async: true, type: 'POST', url: 'category.php', data: {'parent_id': parent_id}, success: function(result) { try { var json = JSON.parse(result); $.each(json, function (idx, val) { var $op = $("<option />").val(val.category_id).text(val.category_name); category.append($op); }); } catch (err) { alert('サーバーとの通信でエラーが発生しました'); return false; } }, error: function(msg) { alert('サーバーとの通信でエラーが発生しました'); return false; } }); } }); </script>
投稿2014/08/05 07:19
総合スコア25
手元で動くことを確認して再度投稿しました
すみません
さっそくの対応ありがとうございます
コピペさせていただいたんですがchromeのf12でエラー内容を確認したところ
Uncaught SyntaxError: Unexpected end of input selectCategory.html:1
とでて動きませんでした。
どうすればいいでしょうか？
省略せずに書き直してみました。callは手元で試せるように書き換えてあります。
mzhs1986様
回答ありがとうございます
これを応用して一番上のコードでやるにはどのようにすればいいでしょうか？
今回はajaxで値をとってきているので
callを元のコードに書き換えてください
すみません・・・
元のコードとはどういった感じのものでしょうか？
callを元に戻しました
mzhs1986様
動いたのですが一つ目のセレクトボックスの値と二つ目のセレクトボックスの値が同じになってしまいます
例えば今一つ目のセレクトボックスを選んだらみかん、りんごが出るのですが
二つ目のセレクトボックスでもみかん、
りんごと出てしまいます
三つ目のセレクトボックスから二つ目のセレクトボックスでみかんを選んだら甘い、すっぱい
りんごを選んだらコクがある、美味しい
と条件通りに出ます
どうすれば一つ目と二つ目のセレクトボックスの値が同じようにならないでしょうか？
コメントも入れてもらえるとありがたいです
category.phpを見せていただけないでしょうか
http://www.dotup.org/uploda/www.dotup.org5234189.jpg.html
このよう感じです
みかんとりんごではないですが
すみませんjs側のミスでした。直したので確認してみていただけないでしょうか
ありがとうございます！
無事に動くことが出来ました
少しお聞きしたいのですが
$('.category').change(function(e) {
var index = $('.category').index(e.target);
のeの部分はeventとはまた違うのですか？
調べてみたのですが何か違うようだったのでお聞きしたいです
eventですよ
eventですかすいません
長々とお付き合いありがとうございます
頑張って勉強していこうと思います！
すみませんもしよろしければ$(function(){var ～
{$.ajaxまでのコードの意味の解説よろしいでしょうか？
自分なりにやってるんですがいまいちわかりません
無駄な処理が多かったので（すみませんorz）削ってコメントを追加しました
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2014/08/05 07:24
2014/08/05 07:29
2014/08/05 07:35
2014/08/05 07:37
2014/08/05 08:12
2014/08/06 04:27