パソコンの初心者です。質問内容がおかしかったらごめんなさい。
選択メニューのフィールドをmultipleにして、javascriptであらかじめ指定した数だけ選択したいのですが、どなたかわかりませんでしょうか?
javascriptでoptionのselectedを複数使っても結局最後にセレクトしたものが選択されてしまいます。
なんかよい方法ありませんでしょうか?

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

A 回答 (2件)

下記のソースを試してみて下さい。



---------- この下から ----------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function PushButton(sel) {
for (i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected) {
sel.options[i].selected = false;
} else {
sel.options[i].selected = true;
}
}
}
-->
</SCRIPT>
</HEAD>

<BODY>

<FORM>
<SELECT multiple name="sel" size=5>
<OPTION value="1" selected>1
<OPTION value="2">2
<OPTION value="3" selected>3
<OPTION value="4">4
<OPTION value="5" selected>5
</SELECT>
<INPUT type="button" value="push" OnClick="PushButton(sel)">
</FORM>

</BODY>
</HTML>
---------- この上まで ----------
    • good
    • 0

こんにちは。

itohhといいます。

コードはこんなとこでしょう。

でも、もしかしたら、表示後にマウスでクリックしたときのことを言ってますか?
複数選択したい場合は、
  (1)1つずつ選択する場合、Ctrlキーを押したまま、マウスクリック。
  (2)いっぺんに選択したい場合は、Shiftキーを押したまま、マウスクリック。
です。

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function InitSelected() {
document.MyForm.sel.options[0].selected = false;
document.MyForm.sel.options[1].selected = true;
document.MyForm.sel.options[2].selected = false;
document.MyForm.sel.options[3].selected = true;
document.MyForm.sel.options[4].selected = false;
}
-->
</SCRIPT>

</HEAD>

<BODY onload="InitSelected()">
<FORM name="MyForm" onload="InitSelected()">
<SELECT multiple name="sel" size=5>
<OPTION value="1">あいうえお
<OPTION value="2">かきくけこ
<OPTION value="3">さしすせそ
<OPTION value="4">たちつてと
<OPTION value="5">なにぬねの
</SELECT>
</FORM>

</BODY>
</HTML>
    • good
    • 0

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

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

QJavaScript で動的に ]最初から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桁だけのマッチングでセレクト状態にさせたいのです。

ループという形をとらずにセレクトさせる方法を探しています。

テクニックをご教授下さい・・・。
宜しくお願い致します。

こんばんは。
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.men...続きを読む

Aベストアンサー

>optionのvalue値の頭から5桁だけのマッチングでセレクト状態にさせたいのです。
valueの値でということは、それぞれのvalueを調べる必要があるからループさせずにはムリでしょう

<OPTION id="item2" value="item2001">メニュー2</OPTION>
とかしておけば
document.getElementById("item2").selected=true;
で一発でできると思うけど

Qjavascriptでselectボックスの

javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。

データが1件の場合、複数件の場合とで分けて、
<OPTION>要素数を取得する処理を記述していますが、
データが1件の場合、
document.getElementsByName("sel").length
で正しい値が取得できません。

詳しくは下記のソースを参照していただきたいのですが、
(1)、(2)、(4)は、正しい値'5'ですが、
(3)だけ誤った値'1'になります。

これはなぜでしょうか?
javascript初心者のため、初歩的な質問かもしれませんが、
教えていただけたら嬉しいです。
よろしくお願い致します。

--------------------------------------
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
  function getSelLen(){
var oForm = document.form1;
var sObj;
var sObj2;

//チェックボックスの数でデータが複数件か1件か判別しています。
if(oForm.chk.length){//データが複数件の場合
for ( var i = 0; i < oForm.chk.length; i++ ) {
sObj=document.getElementsByName("sel")[i];
alert("(1) "+ sObj.length);//・・・・(1) 正
sObj2=oForm.elements["sel"][i];
alert("(2) "+ sObj2.length);//・・・・(2) 正
}
}else{//データが1件の場合
sObj=document.getElementsByName("sel");
alert("(3) "+ sObj.length);//・・・・(3) 誤
sObj2=oForm.elements["sel"];
alert("(4) "+ sObj2.length);//・・・・(4) 正
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<TABLE>
<TR>
<TD>
<INPUT type="checkbox" name="chk" >
</TD>
<TD>
<SELECT name="sel" >
<OPTION value="" selected>
<OPTION value="00">00
<OPTION value="01">01
<OPTION value="02">02
<OPTION value="03">03
</TD>
</TR>
<!-- 複数件の場合 以下のコメントアウトを解除する -->
<!--
<TR>
<TD>
<INPUT type="checkbox" name="chk" >
</TD>
<TD>
<SELECT name="sel" >
<OPTION value="" selected>
<OPTION value="00">00
<OPTION value="01">01
<OPTION value="02">02
<OPTION value="03">03
</TD>
</TR>
-->
</TABLE>
</FORM>
<FORM name="form2">
<INPUT type="button" onClick="getSelLen()" value=" selectの要素数 ">
</FORM>
</BODY>
</HTML>

javascriptでselectボックスの<OPTION>要素数の取得する方法について疑問があります。

データが1件の場合、複数件の場合とで分けて、
<OPTION>要素数を取得する処理を記述していますが、
データが1件の場合、
document.getElementsByName("sel").length
で正しい値が取得できません。

詳しくは下記のソースを参照していただきたいのですが、
(1)、(2)、(4)は、正しい値'5'ですが、
(3)だけ誤った値'1'になります。

これはなぜでしょうか?
javascript初心者のため、初歩的な質問かもしれませんが、
教えていた...続きを読む

Aベストアンサー

getElementsByName()は必ず配列になりますから、
<select name="sel">が1つであっても、<select>を1つだけ取得したい場合は[0]という指定が必要です。


}else{//データが1件の場合
sObj=document.getElementsByName('sel')[0]; // 訂正箇所
alert("(3) "+ sObj.length);//・・・・(3) 誤


sObj.lengthの値は、
sObj=document.getElementsByName('sel')とした場合は<select name="sel">の個数、
sObj=document.getElementsByName('sel')[0]とした場合は、1つめの<select name="sel">の<option>の個数になります。



この動作(配列になるかならないか)はform.elements['sel']の動作と異なります。



なお、複数のフォームフィールドに同じnameが指定されていても問題ありません。
それで送信に失敗する場合は、通常はデータを受け取るCGIアプリケーションのバグです。

PHPで受け取る場合は、通常はname="name[]">のように四角カッコを付ける必要がありますが、HTMLとしては文法違反になります。
<select>に multiple を指定する場合も四角カッコが必要です。

getElementsByName()は必ず配列になりますから、
<select name="sel">が1つであっても、<select>を1つだけ取得したい場合は[0]という指定が必要です。


}else{//データが1件の場合
sObj=document.getElementsByName('sel')[0]; // 訂正箇所
alert("(3) "+ sObj.length);//・・・・(3) 誤


sObj.lengthの値は、
sObj=document.getElementsByName('sel')とした場合は<select name="sel">の個数、
sObj=document.getElementsByName('sel')[0]とした場合は、1つめの<select name="sel">の<option>の個数になり...続きを読む

Qセレクトメニューの連動 multipleについて

複数選択の場合の方法がわからずに困っております。
ご教授くださいますようお願い申し上げます。

大項目Aというセレクトメニューがあり、選択項目が40コ程あります。
たとえば、Aのセレクトメニューの項目「靴」が選択されたら、

「靴」に関連する中項目のセレクトメニューがON(選択可能)になるといった感じで設置しております。
30コ程のセレクトメニューがあります。

下記がjavascriptの中身です。

function selectChange() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08 | selectedNum == 09 | selectedNum == 10 | selectedNum == 11) {
document.score.co1.disabled = false;
document.score.co1.style.backgroundColor='#ffffff';
} else {
document.score.co1.disabled = true;
document.score.co1.style.backgroundColor='#efefef';
}
}


function selectChange2() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08) {
document.score.so.disabled = false;
document.score.so.style.backgroundColor='#FFFFFF';
} else {
document.score.so.disabled = true;
document.score.so.style.backgroundColor='#EFEFEF';
}
}


function selectChange3() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 09) {
document.score.bl1.disabled = false;
document.score.bl1.style.backgroundColor='#FFFFFF';
} else {
document.score.bl1.disabled = true;
document.score.bl1.style.backgroundColor='#EFEFEF';
}
}

今まではこれで問題なく動いていましたが、
今回大項目Aを複数選択できるようにしました。
「靴」と「服」を選択した場合、
靴と服に関連する中項目をONにしたいのですが、先頭の「靴」のみしかONになりません。
いろいろ調べたのですが、さっぱりわからず困っております。

知識が少ないので、ご迷惑をおかけいたしますが宜しくお願いいたします。

複数選択の場合の方法がわからずに困っております。
ご教授くださいますようお願い申し上げます。

大項目Aというセレクトメニューがあり、選択項目が40コ程あります。
たとえば、Aのセレクトメニューの項目「靴」が選択されたら、

「靴」に関連する中項目のセレクトメニューがON(選択可能)になるといった感じで設置しております。
30コ程のセレクトメニューがあります。

下記がjavascriptの中身です。

function selectChange() {
var selectedNum = document.score.cate1.selectedIndex;
...続きを読む

Aベストアンサー

こんにちは

30個optionを書くの面倒だったので自動作成させてますのでwindow.onload=function(){ }は忘れてください
function op(){ }の部分が質問の回答になるかと思います

セレクトメニューで『0』『12』『28』を選択すると左のセレクトメニューが
『1』『18』を選択すると右のセレクトメニューが選択可能になり
それ以外を選択すると選択不可能になります
Ctrl+クリックで複数選択可です
IE6.0でしか機能確認はしていませんので他のでできなかったらごめんなさいm(--)m

<SCRIPT language="JavaScript">
<!--
window.onload=function(){
obj0=document.form.s0;
obj1=document.form.s1;
obj2=document.form.s2;

for(j=0; j<30; j++) {
obj0.options[j] = new Option(j);
obj1.options[j] = new Option(j);
obj2.options[j] = new Option(j);
}
}
//-->
<!--
function op() {
obj=document.form.s0;
if(obj.options[0].selected | obj.options[12].selected | obj.options[28].selected){ document.form.s1.disabled = false; }
else{ document.form.s1.disabled = true; }
if(obj.options[1].selected | obj.options[18].selected ){ document.form.s2.disabled = false; }
else{ document.form.s2.disabled = true; }
}

/-->

</SCRIPT>


<form name="form">
<select name="s0" multiple size="5"></select>
<input type="button" value="open" onclick="op()">
<select name="s1" disabled></select>
<select name="s2" disabled></select>
</form>

こんにちは

30個optionを書くの面倒だったので自動作成させてますのでwindow.onload=function(){ }は忘れてください
function op(){ }の部分が質問の回答になるかと思います

セレクトメニューで『0』『12』『28』を選択すると左のセレクトメニューが
『1』『18』を選択すると右のセレクトメニューが選択可能になり
それ以外を選択すると選択不可能になります
Ctrl+クリックで複数選択可です
IE6.0でしか機能確認はしていませんので他のでできなかったらごめんなさいm(--)m

<SCRIPT language=...続きを読む


人気Q&Aランキング

おすすめ情報