- ベストアンサー
javascriptデータを日本語で渡す場合のプルダウン連動選択方法
- フォームで日本語をvalueに入れてCGIで送信したい場合、受信側のValueの日本語「あああ」の前にAあああといれて送信側の値Aと最初の一文字だけ比べてプルダウンを選択する方法について説明します。
- 上記の例では、日本語を入れた場合、IEではデータの渡しができますが他のブラウザでは動作しません。最低でもFireFox、Opera、Safariで動作する方法を探しています。
- 提供されたサンプルでは、フォームで選択された値をURLパラメータとしてリンク先のページに渡し、リンク先のページで受信し、JavaScriptを使用してプルダウンを選択する方法が示されています。
- ymgy
- お礼率100% (9/9)
- JavaScript
- 回答数6
- ありがとう数16
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
No4のサンプルです リストを作るときには、引用元の用に、英語や数字のみで対応する。 次に、optionの値を使用する時(下記例ではsubmit時)に、本当に必要な値(日本語)に置換する。 例 <html> <body onload="setDropDownList();"> <!-- form に onSubmit を加え、submit 時に置換用の関数を呼び出すように設定する --> <form onSubmit="OptionConvert();"> <!-- リストの値(value)は、元のサンプル通り、英数字で作成 --> <select id="myList" > <option value="A">あああ</option> <option value="B">いいい</option> <option value="C">ううう</option> </select> </form> </body> </html> <script type="text/JavaScript"> <!-- // submit 時に呼ばれる関数 function OptionConvert() { // 置換用の連想配列作成 var ConvertList = new Array(); ConvertList["A"] = "Aあああ"; ConvertList["B"] = "Bいいい"; ConvertList["C"] = "Cううう"; // ドロップダウンリストの要素を取得 var element = document.getElementById("myList"); // 選択された要素の値を置換(日本語で上書き) element.options[element.selectedIndex].value = ConvertList[element.value]; // // 質問通り 単純に value(A) に text(あああ) を追加したいなら この関数は 下記の2行でOK // var element = document.getElementById("myList"); // element.options[element.selectedIndex].value = element.options[element.selectedIndex].value + element.options[element.selectedIndex].text } // 以下元のサンプル通り ： ：
その他の回答 (5)
- think49
- ベストアンサー率59% (285/482)
SELECTボックスの初期値をGETパラメータで渡したい、ということかな？ これでどうでしょうか。 (全角空白は半角空白に置換してください) <script type="text/javascript"><!-- this./*@cc_on @if(@_jscript_version<=5.8) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'load', function (event) { var doc = event.target || this.document, query = doc.location.search.substr(1).split('='); try { doc.getElementById(query[0]).value = decodeURIComponent(query[1]); } catch(e) {} },false); //--></script> </head> <body> <p><a href="2.html?myList=%E3%81%82%E3%81%82%E3%81%82">あああ</a> <a href="2.html?myList=%E3%81%84%E3%81%84%E3%81%84">いいい</a> <a href="2.html?myList=%E3%81%86%E3%81%86%E3%81%86">ううう</a></p> <form> <p> <select id="myList"> <option value="あああ">あああ</option> <option value="いいい">いいい</option> <option value="ううう">ううう</option> </select> </p> </form>
お礼
ありがとうございました。 みなさまから頂いた色々な方法が参考になり解決できました。
- yuoke
- ベストアンサー率53% (8/15)
受信側で受信した時に何とかするのではなく、 optionの値を使用するとき(submit時など)に、値を連想配列とかを使って、自身を書き替えてから使うんじゃ駄目？
お礼
ありがとうございます。 連想配列はformのどこで入れればよいのでしょうか？
- fujillin
- ベストアンサー率61% (1594/2576)
汎用性はまったくないけど… <script type="text/javascript"> <!-- function setDropDownList() { var i=0, key, kl, e, h = location.search.substr(1).split("&"); while (e=h[i++]) if (e.match(/^myList=(.+)/)) key = RegExp.$1; if (!key) return; kl = key.length, i = 0; h = document.getElementById("myList").options; while (e=h[i++]) { if (e.value.substr(0, kl) == key) { e.selected = true; break; } } } //--> </script>
お礼
ありがとうございました。 みなさまから頂いた色々な方法が参考になり解決できました。
- steel_gray
- ベストアンサー率66% (1052/1578)
optionのvalueの先頭に一文字足してそのフォームの送り先では問題ないのでしょうか？ { a:'あああ', b:'いいい', c:'ううう' } こんな対応データを用意しておく方法もありますけど。 一応、valueの先頭一文字で判定するように改造する方法を以下に。 // ドロップダウンリストの初期選択 element.value = lstVal; ↓ // ドロップダウンリストの初期選択 for(var i=0;element.options[i];i++){ if(element.options[i].value.substring(0,1) == lstVal){ element.options[i].selected = true; break; } } 動作確認はしてませんのでミスがあったら失礼。
お礼
ありがとうございます。 文字を足すのは問題ないのです。 対応データを用意する方法はとてもやりやすいと思うのですが それはどういう風におくのでしょうか？ すいませんが、サンプルのような感じで教えてください。
- yyr446
- ベストアンサー率65% (870/1330)
GETで送信、location.search参照という分けですね、 日本語は、 javascriptの「URLエンコード」/「URLデコード」 しなきゃならないのでは。 encodeURIComponent(string) decodeURIComponent(string)
お礼
ありがとうございます。 受信側から日本語でリンクした場合に上記のエンコードをすると どのブラウザでもいけるということですか？ それだと助かります。 どこに入れればよいのでしょうか＞＜
お礼
ありがとうございました。 ブラウザ各種による文字化けという問題も解決できました。 色々方法があることがわかり柔軟に考えれるよう頑張りたいと思います。