出産前後の痔にはご注意!

javascriptでセレクトボックスの"selected"を動的に変更する方法を教えてください><

下記のselectedを"10"から"50"に変更したいのですが、
某ASPサービスの環境下での作業のため制約があり直接変更できません。

<body onload="event">
<select name="select">
<option value="10" selected="selected">10件</option>
<option value="30">30件</option>
<option value="50">50件</option>
</select>



そこで、JavaScriptで何とかしようと思うのですが、
<select>~ </select>の間(selectタグ含む)は、ASPサービスの制約でIDやclassを入れることもできず、
変更できるのは、body開始タグ部分、headerタグ内、body内(一部)です。

ページを読み込んだ際に、「50件を選択」、「10件からselected外す」状態にしたいです。
いろいろサイトを見てなんとなくできそうな気はするのですが、
スキル的に初心者レベルのため、わかりませんでした。


何卒よろしくお願いします!

このQ&Aに関連する最新のQ&A

A 回答 (2件)

jquery を使えるのであればもっとみじかくかけます。


一行です。

http://webhako.net/jquery/select-set-value/

この回答への補足

こんな感じで入れてみましたが動きませんでした。。。
onLoad="selected(50)"というのがダメなんでしょうか?

~~~
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5. …
</head>
<body onLoad="selected(50)">
<script>
function selected(n){
$("select[name='select']").val(n);
}
</script>
<select name="select">
<option value="10" selected="selected">10件</option>
<option value="30">30件</option>
<option value="50">50件</option>
</select>

補足日時:2014/09/04 16:58
    • good
    • 0
この回答へのお礼

あらためて通常のサーバ環境で上記の記述を試したところ、
反映されました!
しかし、ASP環境下では反映されないようです。
制限がかけられているのかもしれませんね。。。
諦めて他のやり方を考えます。

ありがとうございました;;

お礼日時:2014/09/04 18:17

「selectという名前のセレクトボックスからvalueが50のoptionを選ばせる」


というなら以下でいけます。

<select name="dummy">
<option value="10" selected="selected">10件</option>
<option value="30">30件</option>
<option value="50">50件</option>
</select>

<select name="select">
<option value="10" selected="selected">10件</option>
<option value="30">30件</option>
<option value="50">50件</option>
</select>

<select name="dummy">
<option value="10" selected="selected">10件</option>
<option value="30">30件</option>
<option value="50">50件</option>
</select>

<script>
var tags=document.getElementsByTagName("select");
var tag=null;
for(var i=0;i<tags.length;i++){
if(tags[i].name=="select"){
tag=tags[i];
break;
}
}
var opts=tag.options;
for(var i=0;i<opts.length;i++){
if(opts[i].value=="50"){
tag.selectedIndex=i;
break;
}
}
</script>

この回答への補足

申し訳ありません。初心者すぎるのかわかりませんでした。。。
jquery入れるのでしょうか?
イベントハンドラはどのうように入れたらいいのでしょうか。。。

補足日時:2014/09/04 17:02
    • good
    • 0

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QJavaScript で動的に タグでの selected 状態にするには・・・。

実は簡単なのかもしれないですが・・・。
変なとこで躓いています。

<SELECT>タグで15個の<OPTION>が入っているとします。
12番目の<OPTION>のやつをHTMLでいうところのselected状態にするにはどうしてやればいいですか?

宜しくお願いいたします。

Aベストアンサー

JavaScriptからselect要素の中の特定のoptionを選択状態にしたい場合は、

document.form名.select名.options[番号].selected= true;

でいけると思います。
ご質問のケースでは、12番目の要素を選択させると言うことですので、option要素の12番目を指定する意味で

document.form名.select名.options[11].selected= true;

とすれば良いと思います。 JavaScriptでも自動的に取得される要素の配列の連番は0から始まるので、12番目の要素を持つ配列の番号は11になることに気をつければ、問題ないでしょう。

参考になれば…

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qリクエストに応じたselectedの初期値設定方法

リクエストに応じたOPTIONをselectedの初期値にする方法を教えて下さい。

java servletからjspを表示する際に、
setAttributeした値に応じてプルダウンの初期値に設定するにはどうしたら良いですか?

以下の様にDetail.jspに移動する前に、NOをセットしています。
普通に実行したら、YESで表示されてしまいます。
jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

例)
[[[[[ShowDetail.java]]]]]
request.setAttribute("JAPAN", "NO");
request.getRequestDispatcher("/Detail.jsp")
.forward(request, response);

[[[[Detail.jsp]]]]
<form name="Japan">
<table border="1">
<tr>
<th>Japan</th>
<td>
<select name="Japan" id="Japan" >
<option value="YES">YES</option>
<option value="NO">NO</option>
<option value="KNOW">DON'T KNOW</option>
</select>
</td>
</tr>
</table>
</form>

リクエストに応じたOPTIONをselectedの初期値にする方法を教えて下さい。

java servletからjspを表示する際に、
setAttributeした値に応じてプルダウンの初期値に設定するにはどうしたら良いですか?

以下の様にDetail.jspに移動する前に、NOをセットしています。
普通に実行したら、YESで表示されてしまいます。
jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

例)
[[[[[ShowDetail.java]]]]]
request.setAttribute("JAPAN", "NO");
request.getRequestDispatcher("/Detail.jsp")
.f...続きを読む

Aベストアンサー

こんにちは。

>普通に実行したら、YESで表示されてしまいます。
>jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

あと、カテゴリがJavaScriptではなくJavaですね。

順に考えてみませんか。初期値を設定するには何が必要でしょうか。
今は何もしていないから一番上のYESが表示されています。
<option value="NO" selected="selected">とする必要がありますよね。
そうしたらそれを出力するようにJSPを記述すればいいわけです。

フレームワークを何も利用していなければ以下のようになると思います。

<%
// 例だとjapanにNOが入っている
String japan = (String)request.getAttribute ( "JAPAN" );
%>

<select>
<option value="YES"<%= "YES".equals(japan) ? " selected=\"selected\"" : ""; %>>YES</option>
<option value="NO"<%= "NO".equals(japan) ? " selected=\"selected\"" : ""; %>>NO</option>
<option value="KNOW"<%= "KNOW".equals(japan) ? " selected=\"selected\"" : ""; %>>KNOW</option>
</select>

各optionでどの文字列が入っているかによってselected="selected"を出力すれば良いです。

<%= "YES".equals(japan) ? " selected=\"selected\"" : ""; %>

上の記述は

if ( "YES".equals(japan) ) {
out.write ( " selected=\"selected\"");
} else {
out.write ( "" );
}
と同義です。
ようするにjapanにYESが入ってきたらselected="selected"を出力することにより初期選択項目とする。
NOが入ってくれば"YES".equals(japan)には該当しないので無出力、次の"NO".equals(japan)で該当するのでNOの<option>が初期値となります。

こんにちは。

>普通に実行したら、YESで表示されてしまいます。
>jsp側で何かを追記すれば良いと思うのですが、全然わかりません。。。

あと、カテゴリがJavaScriptではなくJavaですね。

順に考えてみませんか。初期値を設定するには何が必要でしょうか。
今は何もしていないから一番上のYESが表示されています。
<option value="NO" selected="selected">とする必要がありますよね。
そうしたらそれを出力するようにJSPを記述すればいいわけです。

フレームワークを何も利用していなければ以下のようになると...続きを読む

QJSPで