Q&A
Railsでアプリケーションを作成しています。
テキストエディタはBracketsを使用しています。
1つのドロップダウンリストを選択したら、もう1つのドロップダウンリストの要素を自動的に変更するということをしたいのです。。
都道府県と市区町村の２つのドロップダウンリストを連携させたくてサイト等で調べながらコードを記述したのですが、上手く動いてくれません。
以下のような感じでコードを作成しました。
form.html.erb <div> <%= f.label :prefecture, '1、住所（都道府県）', class: 'required' %> <%= f.select :prefecture, [ ["①選択してください", "rails_base", {class: 'form-control'}], ["北海道", "hokkaido", {class: 'hokkaido'}], ["青森県", "aomori", {class: 'aomori'}], ["岩手県", "iwate", {class: 'iwate'}], ["宮城県", "miyagi", {class: 'miyagi'}], ・ ・ ・ ["沖縄県", "okinawa", {class: 'okinawa'}] ] %> <%= f.label :city, '２、住所（市区町村）', class: 'required' %> <%= f.select :city, [ ["②選択してください", "rails_base", {class: 'form-control'}], #<!--北海道--> ["札幌市中央区", "Sapporoshityuuouku", {class: 'hokkaido'}], ["札幌市北区", "Sapporoshikitaku", {class: 'hokkaido'}], ・ ・ ・ #<!--沖縄県--> ["那覇市", "Nahashi", {class: 'okinawa'}], ["宜野湾市", "Ginowannshi", {class: 'okinawa'}], ["石垣市", "Ishigakishi", {class: 'okinawa'}], ["浦添市", "Urazoeshi", {class: 'okinawa'}] ] %>
client.js $(function () { 'use strict'; // 都道府県が変更されたら発動 $('select[name="client[prefecture]"').change(function () { // 選択されている都道府県のクラス名を取得 var countyName = $('select[name="client[prefecture]"] option:selected').attr("class"); // console.log(countyName); // 市区町村の要素数を取得 var count = $('select[name="client[city]"]').children().length; // 市区町村の要素数分、for文で回す for (var i=0; i<count; i++) { var city = $('select[name="client[city]"] option:eq(' + i + ')'); if(city.attr("class") === countyName) { // 選択した都道府県と同じクラス名だった場合 city.show(); }else { // 選択した都道府県とクラス名が違った場合 if(city.attr("class") === "msg") { // 「市区町村を選択して下さい」という要素だった場合 city.show(); //「市区町村を選択して下さい」を表示させる city.prop('selected',true); //「市区町村を選択して下さい」を強制的に選択されている状態にする } else { // 「市区町村を選択して下さい」という要素でなかった場合 city.hide(); } } } }) })
このようにコード記述していますが、jQueryが読み込めていないせいなのか、どの都道府県を選択しても
北海道から沖縄県までの全ての市区町村がドロップダウン表示されてしまいます。
原因がわからずに悩んでいたのですが、テキストエディタのほうにJavaScriptの問題が検出されたようなメッセージがありました。
3+ 個の JSLint の問題 1 '$' was used before it was defined. $(function () { 11 Combine this with the previous 'var' statement. var count = $('select[name="client[city]"]').children().length; 14 Move 'var' declarations to the top of the function. for (var i=0; i<count; i++) { 14 Stopping. (36% scanned). for (var i=0; i<count; i++) {
これが原因なのかはわかりませんが、問題とあるので、これを解決したいのです。
この他にもメッセージは出ていたのですが、上記のメッセージが解決出来ませんでしたのでどなたかご教授のほど宜しくお願いします。
追記
問題点はそのままで、ブラウザをリロードすると、北から岐阜県あたりまでは正常に表示され静岡県以降は
なにも表示されないなどの現象がおきたりします。
市区町村の記述が多すぎて読み込めないなんてことがあるのでしょうか？
やはり、メッセージの問題点をクリアしないとダメみたいなので宜しくお願いします。
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。