JavaScriptを使用してセレクトボックスの初期値を設定したい

このQ&Aのポイント
  • JavaScriptを使用して、ページを開くとセレクトボックスの値が初期値になるようにする方法を教えてください。
  • 詳細を説明すると、セレクトボックスには担当者一覧があります。ログインしている担当者名が選択された状態になるようにしたいです。
  • ソースコードを書きましたがうまく動作しません。どうすれば初期状態から担当者が選ばれた状態になるでしょうか。
回答を見る
  • ベストアンサー

selectの初期値を設定したい

いつもお世話になります。 javascriptにて、ページを開くと、 セレクトボックスの値が、初期値になるようにしようと思ってますがうまくいきません。 詳しく書きますと、担当者一覧がセレクトボックスに入っていて、 そのページを開くと、ログインしている担当者名が選ばれた状態にしたいのです。 ※たとえば、「山本太郎」でログインしているとすると、ページを開くとセレクトボックスが、  「山本太郎」が選ばれている状態にしたいのです。 いろいろ調べて、自分なりにソースを書いてみましたが、うまくいきません。 以下ソースになります。 <SCRIPT LANGUAGE="JavaScript" > var tantou = "<%=Rs("作業担当者")%>" var element = document.getElementById("sagyounm"); for (var i=0; i<element.options.length;i++) { if(element.options[i] === 'tantou'){ element.options[i].selected = true; break; }; }; </SCRIPT> Rs("作業担当者")は、ログインした担当者名です。 たぶん上記のソースはセレクトが選ばれている値を取得してるだけだと思います。 *********************************************** 以下は、セレクト部分です。 <select name="sagyoutantou" id="sagyounm" required> <option value=""/>---作業担当者選択---</option> <option value="山本 太郎"/>山本 太郎</option> <option value="山下 清"/>山下 清</option> <option value="岡本 次郎"/>岡本 次郎</option> どうにか、初期状態から担当者が選ばれている状態にできないでしょうか。 お忙しいとは思いますが、 おわかりの方いらっしゃいましたら、 どうかご教授お願いします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

3点修正が必要 (1)load後の処理になるのでwindow.onloadで処理する (2)element.options[i]ではなくelement.options[i].value (3) 'tantou'ではなくtantou ざっと、こんな感じ <script> window.onload=function(){ var tantou = "山本 太郎"; var element = document.getElementById("sagyounm"); for (var i=0; i<element.options.length;i++) { if(element.options[i].value === tantou){ element.options[i].selected = true; break; }; }; } </script> <select name="sagyoutantou" id="sagyounm" required> <option value=""/>---作業担当者選択---</option> <option value="山本 太郎"/>山本 太郎</option> <option value="山下 清"/>山下 清</option> <option value="岡本 次郎"/>岡本 次郎</option>

taka78ube
質問者

お礼

回答ありがとうございます。 ご指摘どおり修正しましたところ、 問題なく動作いたしました。 ほんとうにありがとうございました。

その他の回答 (1)

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

よくわかりませんが… >if(element.options[i] === 'tantou'){ ~~ だと'tanntou'という文字列と比較してしまっているので、多分、一致することはないでしょう。 変数tanntouの内容と比較するのでしょうから、  if(element.options[i] === tantou){ ~~ とすればうまくいくかも… あと、質問文からはわかりませんが、DOM構築後にスクリプトを実行するようになっていますよね? ところで、 >var tantou = "<%=Rs("作業担当者")%>" って、サーバーサイドで処理しているのでしょうから、わざわざクライアントサイドで選択する処理をしなくても、出力するときに担当者をselectedにしておくとか、あるいはセレクトタグなどでなく担当者は固定にしてしまうとかでもよさそうに思いますが…

taka78ube
質問者

お礼

回答ありがとうございました。 まだまだ初心者なので、「''」をつけるのかどうかわかっておりませんでした。 サーバーサイドとクライアントの処理がまだよくわかってませんので、中々難しいです。

関連するQ&A

  • セレクトボックスの連動

    セレクトボックスAを切り替えると、他のセレクトボックスがAと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 function ChangeSelect() { var index = formA.selectA.selectedIndex; for (i=1,i<formB.selectCnt.value,i++) { if (i == index) { FormB.selectB1.options[index].value ); } } } <form name="formA"> <select name="selectA" onchange="javascript:ChangeSelect()"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> <form name="formB> <input type="hidden" name="selectCnt" value=***> <select name="selectB1"> <option value="りんご">りんご <option value="みかん">みかん <option value="いちご">いちご </select> </form> 存在するセレクトボックスは全て同じ値が入っています。 formAにはセレクトボックスは1つですが、formBにあるセレクトボックスは0~複数と場合によって異なります。 formBにあるセレクトボックスはselectB1、selectB2、selectB3という感じに最後の数字のみが異なるnameがつくようにしています。 <input type="hidden" name="selectCnt" value=***>のvalueには、ASPで数えたセレクトボックスの数を入れています(セレクトボックスが10個あれば10と入ります) 数が決まっていればFormB.selectB1.options[index].valueを数の分だけ増やせばいいのですが、0の時もあれば10の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします><

  • 動的セレクトボックスのSelectedについて

    以下のように、動的セレクトボックスを作りました。これ自体は問題なく動くのですが、selectedの指定方法がわかりません。例えば、ページ表示に「東京都」と「中央区」を選択している状態にしたいです。よろしくお願いいたします。 <html> <head> <script type="text/javascript"><!-- function SelectOption(parentValue, text, title, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; } var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "都道府県", "1")); box1.registOption(new SelectOption(null, "神奈川県", "都道府県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "区市町村", "1")); box2.registOption(new SelectOption("1" , "中央区" , "区市町村", "2")); box1.setChild(box2); window.onload = function() { box2.make("1"); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2"></select> </select> </form> </body> </html>

  • 今日の日付を自動的にセレクトしたいのですが・・・。

    うまくできません。 どなたか助けていただけないでしょうか? よろしくおねがいします。 今のソースはこんな状態です。 onChange="setDate(this.form);"は4月の時に30日までとかにつかっています。 <!--最初に今日の日付を選択したい--> var date=new Date(); var year = date.getYear(); var year= (year< 2000) ? year+1900 : year; var mon=date.getMonth(); var day=date.getDate(); alert(mon); function setNow(form){ for(var i = 0;i<document.nanngatu.nanngatu.options.length;i++){ if(document.nanngatu.nanngatu.options[i].text==mon){ document.nanngatu.nanngatu.options.selectedIndex=i; break; } } } --間は省略-- <onLoad="setNow(this.form)" > <form name="nanngatu"> <select name="nanngatu" onChange="setDate(this.form);" > <option value="32">1</option> <option value="30">2</option> <option value="32">3</option> <option value="31">4</option> <option value="32">5</option> <option value="31">6</option> <option value="32">7</option> <option value="31">8</option> <option value="32">9</option> <option value="31">10</option> <option value="32">11</option> <option value="31">12</option> </select>月

  • element.options.lengthとは?

    http://javascriptist.net/ref/element.select.option.value.html のサイトのサンプルコードの24行目にある for (var i=0;i<element.options.length;i++) { の部分に、element.options.lengthがあります。 これは、が入るのでしょうか。 <select> <option></option> <option></option> </select> の場合はelement.options.lengthが2に <select> <option></option> <option></option> <option></option> <option></option> </select> の場合はelement.options.lengthが4に <select> <option></option> </select> の場合はelement.options.lengthが1に というようにelement.options.lengthは <select>の<option>の合計数を常に表しているのでしょうか。

  • セレクトボックス連動

    過去の質問にありましたソースを参考にセレクトボックスの 連動タイプをphpを絡めて作っています。 DBから取出した menua に入る値を初期値に設定したいのですが うまくいきません。 menua には AAA、BBB、CCCが入ります。 初期値を変えるにはどのようにすればいいのでしょうか。 また、menua以外にもmenubの初期値も変える事が出来るのでしょうか。 以下ソースになります。 <? $menua = "BBB"; ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- data = [ ["AAA", {key:"A01",value:101}, {key:"A02",value:102}, {key:"A03",value:103}], ["BBB", {key:"B01",value:201}, {key:"B02",value:202}, {key:"B03",value:203}], ["CCC", {key:"C01",value:301}, {key:"C02",value:302}, {key:"C03",value:303}] ]; // --> </script> <script type="text/javascript"> <!-- window.onload=function (){ for(var i=0; i<data.length; i++){ document.FORM1.menua.options[i] = new Option(data[i][0],data[i][0]); } setSubMenu(0); }; function setSubMenu(no){ document.FORM1.menub.length=0; for(var i=1; i<data[no].length; i++){ document.FORM1.menub.options[i-1] = new Option(data[no][i].key,data[no][i].value); } } // --> </script> </head> <body> <form name="FORM1"> <select name="menua" onchange="setSubMenu(this.selectedIndex)"> </select> <select name="menub" > </select> </form> </body> </html>

  • セレクトボックスのvalue値でactionを変更

    いつもお世話になっております。 メニュー(セレクトボックス)のvalue値によってフォームのactionの内容を変更する方法を探しています。 【JavaScript】ラジオボタンにより、formのaction内容を変更 http://okwave.jp/qa/q6003560.html という質問を見つけ、こちらのラジオボタンをセレクトボックスに変更したのですが、動作しません。 javascriptを変更しなくてはいけないのだとは思うのですが、まったくの素人のため、検討もつかず、相談に伺いました。 <script type="text/javascript"> <!-- function check(f){ var r=f.elements["aaa"]; var flg=false; var list={"A":"aaa.php","B":"bbb.php","C":"ccc.php"}; for(var i=0;i<r.length;i++){ if(r[i].checked){ f.action=list[r[i].value]; flg=true; break; } } } //--> </script> </head> <body> <form action="" onSubmit="return check(this)"> <input name="key" type="text" value=""> <select name="aaa"> <option value="" selected>Category</option> <option value="A">AAA</option> <option value="B">BBB</option> <option value="C">CCC</option> </select> <input type="button" value="Go"> </form> </body> </html> お分かりになる方、教えていただけると助かります。 よろしくお願いいたします。

  • セレクトボックスの操作

    <select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="追加"> 例えば、上記のセレクトボックスの3を選択して送信ボタンを押したら、3以外の4つの数字の値を持ったセレクトボックス(select name="example2)を出現させたいのです。(example1を残したまま) 選択した数字以外の値を持ったセレクトボックスを出現させたいです。 <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="追加"> 上記のようになります。example2の1を選択し送信したら <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 上記の手順でセレクトボックスが3つに増えた場合のソースは次のような感じに <select name="example1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="1" value="取り消し"> <select name="example2"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit"name="2" value="取り消し"> <select name="example3"> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 取り消しを押した場合、そのセレクトボックスを削除し、一番新しいセレクトボックス(example3)に削除された値を追加したいです。 example2を取り消した場合、 <select name="example3"> <option value="1">1</option> <option value="2">2</option> <option value="4">4</option> <option value="5">5</option> </select> <input type="submit" name="3" value="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか? ご教示頂けますと幸いです。 宜しくお願いいたします。

  • セレクトボックスとテキストボックスの連動について

    セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例: 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。

  • php デーやベース内 セレクトボックス

    データベース内のある項目をセレクトボックスにて表示させ、そのセレクトボックスを複数作りたいのですが、最初のセレクトボックスしかデータベース内のものを表示できなく困っています。 ソースは下記の通りになります。 for ($i = 1; $i <= 11; $i++) { $names .= '<select name="name[' .$i. ']">'."\n"; while ($row = mysql_fetch_array($nameResult)) { $memberName = $row['name']; $names .= '<option value="' .$memberName. '">' .$memberName. '</option>'."\n"; } $names .= '</select>'."\n"; } echo $names; 2つめ以降もデータベース内のもの受け取れるようにしたいのですが、宜しくお願いします。 ソースが間違っていましたら、正しいソースも教えていただければと思います。

    • ベストアンサー
    • PHP
  • セレクトボックスに"value"と"word"を付け加えたい。

    初めての投稿をさせてもらいます。JavaScript初心者な者で解る方がいらっしゃればご教授のほど宜しくお願いします。 質問させてもらいたい事はこちらのソースに"value"と"word"を付け加えることは出来ますでしょうか? 外部ファイルには /** * 選択肢クラス * @param parentValue 親の値(null:いつでも表示) * @param text 表示テキスト * @param value 値 * @param style CSS(省略可) */ function SelectOption(parentValue, text, value, style) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; if(style) { this.style.cssText = style; } }; return this; } /** * セレクトボックスクラス * @param id セレクトボックスID */ function SelectBox(id) { /** * IDに対応オブジェクトを取得 * @return オブジェクトorNULL */ function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } // オプションのリスト var options = []; /** * オプション登録 * @param condition 表示条件 */ this.registOption = function(option) { options[options.length] = option; }; // 子のオブジェクト var child = null; /** * 子のオブジェクトを設定する * @param childObj 子のオブジェクト */ this.setChild = function(childObj) { child = childObj; }; /** * オプション反映 * @param parentValue 親の値(null:全部表示) * ※比較に==を使っているのでundefinedもnullと等しく扱われる。 */ this.make = function(parentValue) { var obj = getObject(); if(obj) { // 選択肢削除 obj.options.length = 0; // 表示すべき選択肢抽出 var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } // 選択肢反映 obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } // 子のオブジェクトにも連鎖反映 if(child) { child.make(obj.value); } } }; return this; } HTMLファイルには <html> <head> <title>セレクトボックス親子関係</title> <script type="text/javascript" src="Select.js" charset="Shift_JIS"></script> <script type="text/javascript"><!-- var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "都道府県", "0", "color:gray;")); box1.registOption(new SelectOption(null, "東京都" , "1")); box1.registOption(new SelectOption(null, "神奈川県", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "区市町村", "0", "color:gray;")); box2.registOption(new SelectOption("1" , "千代田区", "1")); box2.registOption(new SelectOption("1" , "中央区" , "2")); box2.registOption(new SelectOption("2" , "横浜市" , "3")); box2.registOption(new SelectOption("2" , "川崎市" , "4")); var box3 = new SelectBox("sb3"); box3.registOption(new SelectOption(null, "詳細" , "0", "color:gray;")); box3.registOption(new SelectOption("1" , "一番町" , "1")); box3.registOption(new SelectOption("3" , "みなとみらい", "2")); box1.setChild(box2); box2.setChild(box3); window.onload = function() { box1.make(null); }; //--></script> </head> <body> <form> <select id="sb1" onchange="box2.make(this.value);"></select> <select id="sb2" onchange="box3.make(this.value);"></select> <select id="sb3"></select> </form> </body> </html> となっております。

専門家に質問してみよう