ベストアンサー

※ ChatGPTを利用し、要約された質問です（原文：複数セレクトメニュー連動の追加・・・その後）

複数セレクトメニュー連動の追加

2011/06/16 12:21

このQ&Aのポイント

2008年のＱ＆Ａを参考に、プルダウンメニューを作成中
100件以上のプルダウンを選択し他後、別の親選択肢を選ぶと、子のデーターに、先程の１００件以上の選択肢が残って表示される
javascript初心者なので、ご教授いただけると助かる

複数セレクトメニュー連動の追加・・・その後

2008年の、当サイトでのＱ＆Ａを拝見しまして、fujillinさんのご回答を参考に、プルダウンメニューを作っています。一つの選択肢が１００件以上必要なので、作りましたところ、１００件以上のプルダウンを選択し他後、別の親選択肢を選ぶと、子のデーターに、先程の１００件以上の選択肢が残って表示されてしまいます。大変お手数ですが、javascript初心者なもので、どなたかご教授いただけますと、大変助かります。以下は、fujillinさんオリジナルに、１００件以上のデータを付け加えた、テストコードです。 <html> <head> <script> var sBox=[]; var iData={'全国':'北海道地方,東北地方,関東地方,その他', '北海道地方':'北海道', '東北地方':'青森県,岩手県,宮城県', '関東地方':'茨城県,栃木県,東京都', '北海道':'函館市,札幌市,旭川市', '岩手県':'盛岡市,宮古市,平泉市', '東京都':'23区,武蔵野市,三鷹市,調布市,府中市', '23区':'千代田区,中央区,港区,文京区,新宿区,渋谷区,台東区,墨田区', '千代田区':'旭町,淡路町,飯田橋,内幸町,神田', 'その他':'１＝1,２＝2,３＝3,４＝4,５＝5,６＝6,７＝7,８＝8,９＝9,１０＝10,１１＝11,１２＝12,１３＝13,１４＝14,１５＝15,１６＝16,１７＝17,１８＝18,１９＝19,２０＝20,２１＝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,４８＝48,４９＝49,５０＝50,５１＝51,５２＝52,５３＝53,５４＝54,５５＝55,５６＝56,５７＝57,５８＝58,５９＝59,６０＝60,６１＝61,６２＝62,６３＝63,６４＝64,６５＝65,６６＝66,６７＝67,６８＝68,６９＝69,７０＝70,７１＝71,７２＝72,７３＝73,７４＝74,７５＝75,７６＝76,７７＝77,７８＝78,７９＝79,８０＝80,８１＝81,８２＝82,８３＝83,８４＝84,８５＝85,８６＝86,８７＝87,８８＝88,８９＝89,９０＝90,９１＝91,９２＝92,９３＝93,９４＝94,９５＝95,９６＝96,９７＝97,９８＝98,９９＝99,１００＝100'}; function menu(sel){ for (i=0, seln=-1; i<sBox.length; i++){if (sBox[i]==sel) seln=i;} if (seln>-1){ var selkey=sel.options[sel.selectedIndex].text; if (selkey=='----') selkey=''; if (seln+1<sBox.length) set(seln+1,selkey); } } function set(n,key){ var s=sBox[n]; var dat=[]; for (i=0; i<s.options.length; i++) s.options[0]=null; if (key && iData[key]){ dat=('----,' + iData[key]).split(','); for (i=0; i<dat.length; i++) s.options[i]=new Option(dat[i],s.name+'-'+i); } s.style.visibility=(dat.length)?'visible':'hidden'; if (n+1<sBox.length) set(n+1,''); } window.onload=function(){if (sBox=document.Form1.getElementsByTagName('select')) set(0,'全国');} </script> </head> <body> <form name="Form1" method="POST" action="test.php"> <select name="area" onChange="menu(this)" style="visibility:hidden"></select> <select name="prefecture" onChange="menu(this)" style="visibility:hidden"></select> <select name="city1" onChange="menu(this)" style="visibility:hidden"></select> <select name="city2" onChange="menu(this)" style="visibility:hidden"></select> <select name="city3" onChange="menu(this)" style="visibility:hidden"></select> <p> <input type="reset" value="クリア" onclick="set(0,'全国')"> <input type="submit" value="送信"> </form> </body> </html>

r58_on_job
お礼率41% (5/12)

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

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

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

ベストアンサー

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

2011/06/16 14:29 回答No.1

大変失礼いたしました。なんかおかしなことやってますね。 optionをクリアするところが変でした。すみません。 function set()の最初の方から、 function set(n,key){ var s=sBox[n]; var dat=[]; //for (i=0; i<s.options.length; i++) s.options[i]=null; s.options.length = 0; //←この行と入替え if (key && iData[key]){ //以下同じとすれば、多分、大丈夫だと思います。　（大分、以前に作ったので書き方が下手かも…　汗）

質問者

お礼 2011/06/16 14:50

早速のご回答、ありがとうございます。上記の変更をしましたところ、うまく作動しました。ありがとうございました。また、大変お手数ですが、長いプルダウンメ選択肢を表示させた後、その長いまま、次の選択肢が短くても、長い選択フィールドが表示されてしまう現象が出ました。選択フィールドの長さを初期化する方法を教えていただけませんでしょうか。ご多用中、よろしくお願いします。 r58_on_job拝

その他の回答 (2)

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

2011/06/17 09:06 回答No.3

#1、#2です。よくわかっていませんが、クリアするのに length=0　と安直な方法をとってしまったのが原因かも… それなので、かわりに　while(s.firstChild) s.removeChild(s.firstChild); とすることで、多分うまくいくのではないかと想像しますが、いかがでしょうか？それでもダメだと、#2で書きましたように要素を新しく生成するような方法しか思いつきません。（うまくいくのかは不明）

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

2011/06/16 22:20 回答No.2

#1です。＞その長いまま、次の選択肢が短くても、長い選択フィールドが＞表示されてしまう現象が出ましたう～ん。こちらの環境（Windows、 Fx4.0、 Opera10.6、 IE6.0）では再現できないのでわからないのですが… 何らかのプロパティが残ってしまっているのでしょうかねぇ。 select要素にsizeはありますが、これは表示する時の項目数なのでプルダウン部分の長さではないですし… あるブラウザ特有のプロパティなのかも。原因がわからないので、対処法として思いつくのは、　セレクト要素の中身（オプション）を書き換える処理をやめて、新しいセレクト要素を作成・追加し、古い要素は削除してしまうという方法くらいでしょうか。これで、直るかどうかは不明ですが…（現象が確認できてないのでわかりません）

質問者

補足 2011/06/17 19:46

ご連絡ありがとうございます。こちらで、IE９、およびCrome 12で作動確認しましたところ、上記の現象は出ませんでした。ただし、職場の　IE８だと上のような現象が出てしまうのでした。何とか対処しようと思います。大変お手数をおかけしました。ありがとうございます。

複数セレクトメニュー連動の追加

複数セレクトメニュー連動の追加・・・その後

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

お礼 2011/06/16 14:50

その他の回答 (2)

補足 2011/06/17 19:46

関連するQ&A

セレクトメニューの4連動

セレクトメニュー連動のテキストをクリアにしたい

複数セレクトメニュー連動の追加の仕方について、教えてください

セレクトメニューからもう一つのセレクトメニューを選択したか確認

セレクトメニュー選択でもう一つセレクトメニューを出す

サブウィンドウのリンクに応じて親ウィンドウのセレクトメニューにデータを反映させる

セレクトメニューで

セレクトメニューの連動、そしてページへのリンク

ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

複数のセレクトメニューを制御するとき・・・

連動セレクトボックスを同一ページにもう一つ追加したい

3連セレクトボックスで選択肢を変更し条件を絞り込む

セレクトボックスの連動

連動するセレクトボックスの内容を増やしたい

セレクトメニューの選択によって次に表示されるDivを変更したい

2番目のセレクトメニュー選択項目に応じてリンク先を変えたい

JavaScriptのセレクトボックスの連動について

3つの連動したプルダウンメニューのフォームについて

セレクトボックス連動

セレクトメニューでレイヤーの切り替え

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

複数セレクトメニュー連動の追加

複数セレクトメニュー連動の追加・・・その後

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

お礼 2011/06/16 14:50

その他の回答 (2)

補足 2011/06/17 19:46

関連するQ&A

セレクトメニューの4連動

セレクトメニュー連動のテキストをクリアにしたい

複数セレクトメニュー連動の追加の仕方について、教えてください

セレクトメニューからもう一つのセレクトメニューを選択したか確認

セレクトメニュー選択でもう一つセレクトメニューを出す

サブウィンドウのリンクに応じて親ウィンドウのセレクトメニューにデータを反映させる

セレクトメニューで

セレクトメニューの連動、そしてページへのリンク

ふたつのセレクトメニューの項目を外部ファイルから読み込ませて連動させたい。

複数のセレクトメニューを制御するとき・・・

連動セレクトボックスを同一ページにもう一つ追加したい

3連セレクトボックスで選択肢を変更し条件を絞り込む

セレクトボックスの連動

連動するセレクトボックスの内容を増やしたい

セレクトメニューの選択によって次に表示されるDivを変更したい

2番目のセレクトメニュー選択項目に応じてリンク先を変えたい

JavaScriptのセレクトボックスの連動について

3つの連動したプルダウンメニューのフォームについて

セレクトボックス連動

セレクトメニューでレイヤーの切り替え

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録