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

前へ 次へ
このQ&Aのポイント
  • フォームで日本語をvalueに入れてCGIで送信したい場合、受信側のValueの日本語「あああ」の前にAあああといれて送信側の値Aと最初の一文字だけ比べてプルダウンを選択する方法について説明します。
  • 上記の例では、日本語を入れた場合、IEではデータの渡しができますが他のブラウザでは動作しません。最低でもFireFox、Opera、Safariで動作する方法を探しています。
  • 提供されたサンプルでは、フォームで選択された値をURLパラメータとしてリンク先のページに渡し、リンク先のページで受信し、JavaScriptを使用してプルダウンを選択する方法が示されています。
回答を見る
  • ベストアンサー

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

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"> <!-- ： ： どうかご教授お願いします。 また、結果が同じであれば他の方法でも大丈夫なので なにかいい方法がありましたら教えてください！！

  • ymgy
  • お礼率100% (9/9)

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

  • ベストアンサー
  • yuoke
  • ベストアンサー率53% (8/15)
回答No.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 } // 以下元のサンプル通り ： ：

ymgy
質問者

お礼

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

その他の回答 (5)

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

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>

ymgy
質問者

お礼

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

  • yuoke
  • ベストアンサー率53% (8/15)
回答No.4

受信側で受信した時に何とかするのではなく、 optionの値を使用するとき(submit時など)に、値を連想配列とかを使って、自身を書き替えてから使うんじゃ駄目？

ymgy
質問者

お礼

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

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

汎用性はまったくないけど… <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>

ymgy
質問者

お礼

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

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

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; } } 動作確認はしてませんのでミスがあったら失礼。

ymgy
質問者

お礼

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

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

GETで送信、location.search参照という分けですね、 日本語は、 javascriptの「URLエンコード」/「URLデコード」 しなきゃならないのでは。 　encodeURIComponent(string) 　decodeURIComponent(string)

ymgy
質問者

お礼

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptでプルダウンのサイズを取得

    JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length　にて取得できると思うのですが 試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> 　　　　<script type="text/JavaScript"> 　　　　　　　　　　　　　　alert(document.getElementById("pulldown").length); 　　　　</script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>

  • JavaScriptのプルダウン

    プルダウンメニューの中から選択したページへジャンプするようにしたいのですがわからないところがあるので教えてください。 TOPページはframesetでmenu、TOP2の上下に分かれています。プルダウンメニューはmenuのページに置き、選択したページを表示するのは下のTOP2の部分に表示させたいんです。 下記のように記述したのですがこのままだとジャンプしたページはmenuに表示されてしまいます。 －－－－－－－－－－－－－－－－－－－－ <script Language="JavaScript"> <!-- function popJump(selOBJ) { n = selOBJ.selectedIndex; location.href = selOBJ.options[n].value; } // --> </script> </head> <body> <form> <select onChange="popJump(this)"> <option value="#">選択して下さい <option value="top2.htm">トップページ <option value="A.htm">A <option value="B.htm">B </select> </form> －－－－－－－－－－－－－－－－－－－－ <option value="A.htm">のところでTOP2へジャンプするように指定するのだと思うのですが その方法がいろいろ調べてみたのですがわかりません。 わかる方、アドバイスをお願いします。

  • 連動プルダウンのclonenode

    質問お願いします。 連動プルダウンをclonenodeで複製し、行を追加するjavascriptを組みたいのですが、 複製されたプルダウンを変更すると、最初の行のプルダウンに連動してしまいます。 <html> <head> <title>連動プルダウン複製</title> <script type="text/javascript"> /*@cc_on@*/ function addEvent(e, t, f){ e./*@if(1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ t, f, false); } function addRow(trigger){ var table = trigger.ownerDocument.getElementById('Table1'); // 最初の行こぴー var row = table.rows[0].cloneNode(true); row.id = 'ROW.' + table.rows.length; // 最初のセレクト要素 select = row.getElementsByTagName('SELECT')[0]; select.name = 'column.' + table.rows.length; // 最初の tbody に行追加 table.tBodies[0].appendChild(row); } function cText(evt){ var obj = evt.target || evt.srcElement; // ... } </script> </head> <body> <div> <table id="Table1"> <tbody <tr> <td class="cellWhite"> <form> 設備停止項目： <select name="column" onchange="SetSubMenu(value);"> <option value="stop" selected>休止</option> <option value="check">点検・調整</option> <option value="clean">清掃</option> <option value="out">外部事情</option> <option value="machien">機械故障</option> <option value="ele">電気故障</option> <option value="stone">砥石交換</option> <option value="eat">食休</option> </select> </form> </td> <td> <form id="stop" class="secondpulldown"> 設備停止理由： <select> <option value="">余力</option> <option value="">SD</option> <option value="">自家整備</option> <option value="">日報収集</option> </select> </form> <form id="check" class="secondpulldown"> 設備停止理由： <select> <option value="">部品交換</option> <option value="">調整</option> <option value="">給油</option> <option value="">MT検査応援</option> </select> </form> <form id="clean" class="secondpulldown"> 設備停止理由： <select> <option value="">始業時</option> <option value="">終業時</option> <option value="">中間時</option> <option value="">スケールバック上げ</option> <option value="">集塵機バック上げ</option> </select> </form> <form id="out" class="secondpulldown"> 設備停止理由： <select> <option value="">給材時</option> <option value="">集材時</option> <option value="">停電</option> </select> </form> </td> <td> <form id="time" class="thirdpulldown"> 設備停止時間：<input type="text" width=65 size=8 style=text-align:right pattern="[0-9]*"/> </form> </td> </tr> </tbody> </table> <input type="button" value="行追加" onclick="addRow(this)"> </div> </body> </html> わかる方いらっしゃいましたら、ご回答よろしくお願いします。

  • 2つのプルダウンを連動させて、selectedで選択状態にしたい

    JavaScript初心者です。 今、phpとMySQLとJavaScriptで車の情報を登録する画面を作っています。 1つのプルダウンが選択後、もうひとつのプルダウンを表示するのですが、 入力画面から確認画面へ移って、history.backでもう一度入力画面にもどったときに、 選択された状態で表示したいのです。 下記のmakerは、値をセッションで受け取り、selectedをつける指示を したので、 選択状態にすることができました。 もう一つのcarnameがどうしたらよいか分かりません。 どうかご教授お願い致します。 <head> <script type="text/javascript"> <!-- var area=0; function setArea(n) { area=n; carnameItem = [ //トヨタ ['カローラ','クラウン','セルシオ'], //ニッサン ['シーマ','エルグランド','ローレル'], len = document.form1.carname.options.length; for (i=len-1; i>0; --i)document.form1.carname.options[i] = null; if(n!=0){ document.form1.carname.style.visibility = "visible"; for (i=0; i<carnameItem[n-1].length; i++)document.form1.carname.options[i+1] = new Option(carnameItem[n-1][i]); } setPref(0); } //--> </script> </head> <body> <form name="form1"> <select name="maker" onChange="setArea(this.selectedIndex)"> <option value="0"<?php echo $selected1?>>▼選択してください</option> <option value="1"<?php echo $selected1?>>トヨタ</option> <option value="2"<?php echo $selected2?>>ニッサン</option> </select> <select name="carname" onChange="setPref(this.selectedIndex)"><option value="0" selected>▼選択してください</option></select> </form>

  • Javascriptでセレクトメニューの選択チェックの方法

    Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>

  • プルダウンで選択したページにフォームデータを送る

    a.htmlからプルダウンで選択した1～6までのhtmlに、フォームデータを送る ということは可能でしょうか？ いろいろ組み合わせたりしていますがうまくいきません。 どなたかご教授お願い致します。 <SCRIPT LANGUAGE="JavaScript"> <!-- function jumpMenu(){ location=(document.link.list.options [document.link.list.selectedIndex].value); } //--></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- // sendURL = " jumpMenu()"; function sendData() { sData = escape(doument.myFORM.theData.value); Location.href = sendURL + "?"+sData; } //--> </SCRIPT> <form name="myFORM"> <SELECT NAME="list"> <OPTION VALUE="1.html" SELECTED>1</OPTION> <OPTION VALUE="2.html">2</OPTION> <OPTION VALUE="3.html">3</OPTION> <OPTION VALUE="4.html">4</OPTION> <OPTION VALUE="5.html">5</OPTION> <OPTION VALUE="6.html">6</OPTION> </SELECT> <INPUT TYPE="TEXT" SIZE="61" NAME="a"> <INPUT TYPE="submit" VALUE="GO" onClick="sendData()"> <INPUT TYPE="reset" VALUE="クリア">

  • プルダウンメニューで、選択項目をリンク先でも維持したい。

    javascriptを使用したプルダウンメニューについて質問です。 <form name="form1"> <select name="select" onChange="location=select.options[select.selectedIndex].value"> <option value="a.html#01">Ａ01</option> <option value="a.html#02">Ａ02</option> <option value="a.html#03">Ａ03</option> <option>---------------</option> <option value="b.html#01">Ｂ01</option> <option value="b.html#02">Ｂ02</option> <option>---------------</option> </select> </form> ２つのページ（a.html、b.html）上部に上記のようなプルダウンメニューを置き、それぞれ相互に行き来できるようにしました。 一応正常に動くのですが、たとえばa.htmlのプルダウンで『Ｂ01』を選択してリンク先b.htmlに飛ぶと、プルダウンの選択項目が一番上の『Ａ01』に戻ってしまっています。 b.htmlに飛んだ後も『Ｂ01』選択の状態で残したいのですが。 どのようにすればよいのでしょうか・・・ よろしくお願い致します。

  • プルダウンを選択していないときは、初期値(selected)の値を、選

    プルダウンを選択していないときは、初期値(selected)の値を、選択したときは選択値を、hiddenで渡したい。 ▽プルダウン例 <form> <select> <option value="0" selected>A</option> <option value="4">B</option> <option value="6">C</option> </select> </form> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="category_name" value="hoge" type="hidden"> ※formとかselectにid振っても構いません。 ※javascriptでやりたいです。

  • プルダウン連動とリンク

    選択項目により連動するプルダウンを利用し、各々のページにリンクさせようと思っているのですが、上手くいきません。 一つ目のプルダウンで項目を選択⇒二つ目のプルダウンに項目が表示される⇒選択するとリンクする。 プルダウンはこちらのソースを利用しています。 http://d.hatena.ne.jp/Mars/20071109 連動リンクはこちらを参考にしました。 http://air.rulez.jp/shop/java/jt_pulldown.htm 現在のソースは下記のようになっています。 プルダウンの連動とリンク、それぞれ単体での動作確認は出来たのですが、組み合わせると上手くいきません。 最初のプルダウンで「YYY」を選択し、連動して次のプルダウンに表示される「yahooかgoogle」を選択したらURL先にリンクしたいのですが。 現在はプルダウンは連動はされるものの、2つめのプルダウンで項目を選択しても何も起こらない状態です。 ----------------------------------------------------------------- <script type="text/javascript" src="ConnectedSelect.js"></script> <form> <select id="SEL1"> <option value="XXX">XXX</option> <option value="YYY">YYY</option> </select> <select id="SEL2" onChange="top.location.href=value"> <optgroup label="XXX"> <option value="x1">x1</option> <option value="x2">x2</option> </optgroup> <optgroup label="YYY"> <option value="http://www.yahoo.co.jp/">yahoo</option> <option value="https://www.google.co.jp/">google</option> </optgroup> </select> </form> <script type="text/javascript"> ConnectedSelect(['SEL1','SEL2','SEL3']); </script> --------------------------------------------------------------- これはどのように修正すればリンクされるようになるでしょうか？ また別の方法があればそちらでも構いません。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • ２つのプルダウンを連動させる

    ２つプルダウンがあったとき片方で選択した内容に応じもう一方のプルダウンの内容が 変更されるように以下のようなコードを書いてみました。 しかし、これだと1番目のプルダウンでAを選択した後、Bを選択しなおすと 2番目のプルダウンの選択肢には前回Aを選んだ時に表示されていた内容が 残ってしまいます。そこで 連動するプルダウンの内容を作成する処理（Forループの処理）の直前で 　for (i=0; i<itemNum; i++) { 　　document.myForm.tableName.options[i] = new Option(null, null); 　} という初期化処理を書いてみたのですが結果は同じでした。 解決するための何か良い方法はございますでしょうか。 <html> <head> <title>プルダウン連動サンプル</title> <script type="text/javascript"> table_name = [["10", "9", "8", "7", "6"], ["りんご", "メロン", "バナナ"], ["嵐"]]; function setMenuItem(n) { itemNum = table_name[n].length; // 項目数 //連動するプルダウンの内容を作成 for (i=0; i<itemNum; i++) { alert(table_name[n][i]); document.myForm.tableName.options[i] = new Option(table_name[n][i], table_name[n][i]); } //プルダウンの先頭を選択 document.myForm.tableName.options[0].selected = true; } </script> </head> <body onLoad="setMenuItem(0)"> <form name="myForm"> <select name="database" onChange="setMenuItem(this.selectedIndex)"> <option selected>A</option> <option>B</option> <option>C</option> </select> <select name="tableName"> </select> </form> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する