[JavaScript]ドロップコンボで文字列から指定したい!

このQ&Aのポイント
  • JavaScriptを使用してドロップコンボの項目を文字列から指定したいです。
  • 現在ウェブ画面を作成中で、ドロップコンボの項目をJavaScriptで指定する方法についてお尋ねします。
  • ドロップコンボの項目をJAPANやUSAのような文字列から指定する方法を教えてください。
回答を見る
  • ベストアンサー

[JavaScript]ドロップコンボで文字列から指定したい!

こんにちわ。 現在簡単なウェブ画面を作成中ですが行き詰った部分がどうしても乗り切れないのでお聞きします。 宜しくお願い致します。 まず、 <SELECT name="country"> <OPTION value="1">JAPAN</OPTION> <OPTION value="2">USA</OPTION> </SELECT> というドロップコンボがあるとします。 これをJavaScriptで指定する場合、 document.myform.country.options[0].selected = true; という形でするのはわかりますが、JAPANやUSAから指定することはできませんか? こんなコマンドあればうれしいんですが・・・(汗 document.myform.country.selectitem = "JAPAN"; ないですかね・・・こういう方法は。 お手数をお掛け致しますが宜しくお願い致します。

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

  • ベストアンサー
noname#25358
noname#25358
回答No.1

 for で回せばいいんじゃないですかね? l = document.myform.country.length; for ( i = 0; i < l; i++ ) {  if ( document.myform.country.options[i].value == "JAPAN" ) {   document.myform.country.options[i].selected = true;  } }  こんな感じになると思いますが。

関連するQ&A

  • [JavaScript+<select>]最初から5文字一致でセレクト状態にしたい。

    こんばんは。 HTMLとJavaScriptで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー1</OPTION> <OPTION value="item2001">メニュー2</OPTION> </SELECT> </FORM> 初期値を「メニュー2」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から5桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。

  • JavaScriptで書かれたOptionタグをVBAで選択する方法

    <SCRIPT language="JavaScript"> document.write("<SELECT name=aaa><OPTION value=A>1</OPTION><OPTION value=B>2</OPTION><OPTION value=C selected>3</OPTION></SELECT>") </SCRIPT> 上記のJavaScriptで書かれたOptionタグをVBAから objIE.Document.forms(0).aaa.Item(1).Selected = True と選択しても動かすことが出来ませんでした。 VBAからJavaScriptで書かれたOptionタグの選択することをしたいのですが不可能なのでしょうか?

  • DOCTYPE宣言とjavascript

    United Statesを選んだ場合、州を選択。 それ以外の国の場合はtextフィールドで県なりを直接書き込む と言うようにしたく、下記の様にページを作成したのですが、 IE、Opera、Safariなど他では全て動作したのですが、 Firefoxのみ動作しませんでした。 但し、DOCTYPE宣言の"http://www.w3.org/TR/html4/loose.dtd" を削除したらFirefoxでも動作しました。 ただ、ここを削除すると全体的にデザインがズレてしまいます。 Firefoxでも動くようにjavascriptの部分を変更すると言う事で解決したいのですが、 良い書き方が解りません。どなたかご教授願えますでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <script type="text/javascript"> function changeField(){ index= test_form.country.value; if (index != "UnitedStates"){ document.getElementById("select1").style.display="inline"; document.getElementById("select1").disabled=false; document.getElementById("select2").style.display="none"; document.getElementById("select2").disabled=true; } else { document.getElementById("select1").style.display="none"; document.getElementById("select1").disabled=true; document.getElementById("select2").style.display="inline"; document.getElementById("select2").disabled=false; } } </script> <form name="test_form"> <select name="country" onChange="changeField()"> <option value="Japan" selected="selected">Japan</option> <option value="UnitedStates">United States</option> </select> <input id="select1" name="state" type="text" size="20" /> <select id="select2" name="state" style="display:none" disabled> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> </select> </form> </div> </body> </html>

  • VBAでJavaScriptを動かす方法

    <SELECT name="Mgr" onchange="Chg(this,1)"> <OPTION selected value="9999999">==選択==</OPTION> <OPTION value="1">a</OPTION> <OPTION value="2">b</OPTION> <OPTION value="3">c</OPTION> </SELECT> 上記のタグで VBAから objIE.Document.forms(0).Mgr.Item(2).Selected = True とSelectタグを選択したときにChg(this,1)を動かす方法を教えてください。 objIE.Navigate "JavaScript:Chg(this,1)"とやっても動きませんでした。

  • フォームのドロップダウンで未選択のチェックをしたいのですが、下記のよう

    フォームのドロップダウンで未選択のチェックをしたいのですが、下記のようにしたのですがうまくいきません。・・・原因は id[1] だと思うのですが、こういう場合JavaScriptには、どのように記述すればよいのでしょうか? ※ドロップダウンの name="id[1]" は、変更できません。 よろしくお願いします。 <script language="JavaScript"> <!-- function check(){ if(document.cart_quantity.id[1].selectedIndex == 0){ alert('選択してください'); return false; } return true; } //--> </script> <form name="cart_quantity" method="post" action="" onSubmit="return check()"> <select gtbfieldid="272" name="id[1]" id="attrib-1"> <option value="1" selected="selected">選択してください</option> <option value="2">いちご</option> <option value="3">みかん</option> <option value="4">りんご</option> </select> <input type="submit" value="送信" name="submit"> </form>

  • Rails のコンボボックス(select)を生成する時の tabindex 属性の指定の仕方について

    Rails でコンボボックスを作るときに下記の記述でタブインデックスの属性が指定できると思っていたのですが、属性が付加されません。 どなたかご教授おねがいします。 <%= select 'data', 'id', {'test1' => 1, 'test2' => 2}, {:selected => 1, :tabindex => 5} %> ※下記のようにソースが生成されてしまって『tabindex』が指定できない <select id="data_id" name="data[id]"><option value="1" selected="selected">test1</option> <option value="2">test2</option></select>

  • HTMLのコンボボックスとの関連

    HTMLの同ページ内にコンボボックスAとコンボボックスBがあるとして、 <!-- JavaScript部------ --> <script language="javascript"> <!--// function cmdCtr() { if (document.forms[0].A.value=='a2'){ document.forms[0].B.disabled=true; document.forms[0].B.selectedIndex=0; document.forms[0].B.value="b1"; }else{ document.forms[0].B.disabled=false; } } //--> </script> <!-- HTML部----------- --> <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとBボックスが選択出来なくなり、Bボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか? ちなみに、AボックスBボックス両方がきちんと選択されている場合はエラーは起きません。

  • Javascriptでフィールドの数の指定

    JavasCript初心者です。 DOMを使い、数を指定したうえでテキストフィールドを作りたいと思っています。 セレクトボックスで数を指定し、bottonを押して作成させたいです。 <select> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 </select> <input type="button" onclick=""> 6がセレクトされていたら6つのテキストフィールドが出来上がる、といった具合です。 詳しい方教えてください。

  • JavaScript の条件分岐?について

    メールフォーム内でドロップダウンメニューを使用しており 確認/修正等でフォーム画面に戻った時に選択されていた項目が 保持されるような設定で以下のような HTML 及び JavaScript を記述してます。 ( 実際には HTML 内で部分的に php echo を使用しております ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テスト</title> </head> <body> /* **************************************************************** 確認/修正等でフォーム画面に戻った時に入力した情報が消えない設定 ドロップダウンリスト用 **************************************************************** */ function MenuValue($v,$r) { if(!empty($_POST[$v])) { if($_POST[$v] == $r){ return " selected='selected'"; } } } <pre> お問い合わせ内容のカテゴリ <select name="menu" id="menu"> <option value="未選択" selected>▼選択して下さい</option> <option value="ミカン">ミカン</option> <option value="リンゴ">リンゴ</option> <option value="イチゴ">イチゴ</option> <option value="バナナ">バナナ</option> <option value="その他">その他</option> </select> </pre> </body> </html> 上記ソースでブラウザ上で動作テストしますと ドロップダウンリスト内の項目を何も選択しなかった場合 FireFox Validator では 【 エラー: duplicate specification of attribute "SELECTED" 】 となってしまいます。 その時ブラウザ上で表示されてるページの HTML ソースを確認すると・・・ <pre> お問い合わせ内容のカテゴリ <select name="menu" id="menu"> <option value="未選択" selected selected='selected'>▼選択して下さい</option> <option value="ミカン">ミカン</option> <option value="リンゴ">リンゴ</option> <option value="イチゴ">イチゴ</option> <option value="バナナ">バナナ</option> <option value="その他">その他</option> </select> </pre> となっております。 未選択以外の項目を選択した場合はエラーは出ません。 なので Select属性 を外してみると FireFox Validator でのエラーは解消されますが Another HTML-lint gateway では 【 どの <OPTION> にも SELECTED属性 が指定されていません 】 と言われてしまうので SELECTED属性 は外したくありませんし・・・ 前出の JavaScript の条件付けを色々と変更して試してますが当方 JavaScript はあまり詳しくないのでどなたかご教授頂ければと思い 質問投稿させて頂きました。 どなたかご回答よろしくお願い致します。

  • HTML内の指定の位置にプルダウンを読み込みたい

    まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ1 <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ2 </FORM></BODY> </HTML>

専門家に質問してみよう