プロが教える店舗＆オフィスのセキュリティ対策術

javascript：データを日本語で渡す場合のプルダウン連動選択方法

解決済

  • 質問者：ymgy
  • 質問日時：
  • 回答数：6件

javascript：データを日本語で渡す場合のプルダウン連動選択方法について
こういうサンプルがあったのですが
http://q.hatena.ne.jp/1157378504

フォームで日本語をvalueに入れてCGIで送信したいので
受信側のValueの日本語「あああ」の前にAあああといれて送信側の値Aと最初の一文字だけ
比べてプルダウンを選択したいのです。
上記の例は、日本語を入れた場合、IEではデータの渡しができますが他ブラウザでは動作しません。
最低でもFireFox、Opera、Safariで動作したいです。

以下みたいにフォーム部分はしたいのです。

【送信側】
<html>
<body>
<a href="2.html?myList=A">メニューあああ</a>
</body>
</html>

【受信側】
<html>
<body onload="setDropDownList();">
<form>
<select id="myList" >
　　 <option value="Aあああ">あああ</option>
<option value="Bいいい">いいい</option>
<option value="Cううう">ううう</option>
</select>
</form>
</body>
</html>
<script type="text/JavaScript">
<!--
：
：

どうかご教授お願いします。

また、結果が同じであれば他の方法でも大丈夫なので
なにかいい方法がありましたら教えてください！！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.1

  • 回答者： yyr446
  • 回答日時：

GETで送信、location.search参照という分けですね、


日本語は、
javascriptの「URLエンコード」/「URLデコード」
しなきゃならないのでは。
　encodeURIComponent(string)
　decodeURIComponent(string)
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
受信側から日本語でリンクした場合に上記のエンコードをすると
どのブラウザでもいけるということですか？
それだと助かります。
どこに入れればよいのでしょうか＞＜

通報する
お礼日時：2010/06/04 22:47

No.2

  • 回答者： steel_gray
  • 回答日時：

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;
}
}
動作確認はしてませんのでミスがあったら失礼。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
文字を足すのは問題ないのです。
対応データを用意する方法はとてもやりやすいと思うのですが
それはどういう風におくのでしょうか？
すいませんが、サンプルのような感じで教えてください。

通報する
お礼日時：2010/06/04 22:43

No.3

  • 回答者： fujillin
  • 回答日時：

汎用性はまったくないけど…



<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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
みなさまから頂いた色々な方法が参考になり解決できました。

通報する
お礼日時：2010/06/07 16:25

No.4

  • 回答者： yuoke
  • 回答日時：

受信側で受信した時に何とかするのではなく、


optionの値を使用するとき(submit時など)に、値を連想配列とかを使って、自身を書き替えてから使うんじゃ駄目？
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
連想配列はformのどこで入れればよいのでしょうか？

通報する
お礼日時：2010/06/04 22:48

No.5

  • 回答者： think49
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
みなさまから頂いた色々な方法が参考になり解決できました。

通報する
お礼日時：2010/06/07 16:26

No.6ベストアンサー

  • 回答者： yuoke
  • 回答日時：

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
}

// 以下元のサンプル通り
：
：
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。
ブラウザ各種による文字化けという問題も解決できました。
色々方法があることがわかり柔軟に考えれるよう頑張りたいと思います。

通報する
お礼日時：2010/06/07 16:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報