No.1
- 回答日時:
>上から値を追加
だけでまず考えてみるとして
<script>
var num=3;
function test(){
var s1=document.getElementById("s1");
var op=document.createElement("option");
op.setAttribute("value",++num);
op.appendChild(document.createTextNode(num));
s1.insertBefore(op,s1.getElementsByTagName("option")[0]);
s1.selectedIndex=0;
}
</script>
<form>
<select id="s1">
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<input type="button" value="add" onclick="test()">
</form>
この回答への補足
重ね重ねすいません。
皆様の回答大変参考になりました。
しかし自分の力不足で流用することができませんでした。。。
下記のスクリプトに当て込むとするとどうしたらいいでしょうか?
js------------------------------------------------------
var listM, listS;
window.onload=function(){
var e = document.getElementsByTagName('form');
if(e){
listM = e[1].elements['master_list'];
listS = e[1].elements['select_list'];
}
var labels = document.getElementsByTagName('label');
for(var i = 0; i < labels.length; i++){
var label = labels[i];
if(label.attachEvent){ // only IE
label.attachEvent('onmouseover', label_over);
label.attachEvent('onmouseout', label_out);
}
}
}
function portlet_move(a,b,c){
var ops, op, mop, cnt=0, f=0;
if(b==1){
//*** add ***
ops = listM.options;
while(op = ops[cnt++])if(op.selected){f=cnt; break;}
if(f){
mop = ops[--f]; ops = listS.options; cnt=0; f=1;
while(op = ops[cnt++])if(op.value == mop.value) f=0;
if(f) ops[ops.length] = new Option(mop.text, mop.value);
}
}else{
//*** delete ***
ops = listS.options;
while(op = ops[cnt++]) op.selected && listS.removeChild(op);
}
}
function data_sum(a,b){
var buff = "";
for(n = 0; n < a.select_list.length; n++){
buff = buff + a.select_list.options[n].value;
}
a.select_list_data.value = buff;
a.type.value = b;
a.submit();
}
function data_send(a,b){
var buff = "";
for(n = 0; n < a.select_list.length; n++){
buff = buff + a.select_list.options[n].value;
}
a.select_list_data.value = buff;
a.type.value = b;
a.send.value = "true";
a.submit();
}
html-------------------------------------------
<select size="10" name="master_list">
<option class="aaa" value="aaa"></option>
</select>
<input type="button" class="button" value="→" onclick="portlet_move(this.form,1,2);">
<br />
<input type="button" class="button" value="←" onclick="portlet_move(this.form,2,1);">
<select size="10" name="select_list">
<option class="aaa" value="aaa"></option>
</select>
<input type="button" class="button" value="登録" onclick="data_send(this.form,'recommended_write');" />
No.2
- 回答日時:
ご質問の意味がよくわかりませんが…
勝手に想像して、こういうことでしょうか?
<html>
<head>
<style type="text/css">
select { width:80px; display:block; float:left; }
.left { float:left; padding:8px 12px;}
</style>
<script type="text/javascript">
function move(n) {
var e1 = document.getElementById('sel1');
var e2 = document.getElementById('sel2');
var esorc = n?e2:e1, edest = n?e1:e2;
var idx = esorc.selectedIndex;
if (idx>=0){
e1 = esorc.options[idx];
edest.insertBefore(e1.cloneNode(true),edest.firstChild);
esorc.removeChild(e1);
if (e2=esorc.options[idx]) e2.selected = false;
}
}
</script>
</head>
<body>
<select id="sel1" size=6>
<option value="A1">textA1
<option value="A2">textA2
<option value="A3">textA3
<option value="A4">textA4
</select>
<div class="left">
<button onclick="move(0);">>></button>
<p><button onclick="move(1);"><<</button>
</div>
<select id="sel2" size=6>
<option value="B1">textB1
<option value="B2">textB2
<option value="B3">textB3
<option value="B4">textB4
</select>
</body>
</html>
No.3
- 回答日時:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>XXXX</title>
</head>
<style type="text/css">
.xxx SELECT {
display : inline-block;
vertical-align : top;
width : 8em;
}
.xxx SPAN {
display : inline-block;
width : 2em;
padding : 1em 0.5em;
}
</style>
<script type="text/javascript">
//@cc_on
( function ( ) {
document./*@if(1) attachEvent( 'on' + @else@*/ addEventListener( /*@end@*/ 'click', function( evt ) {
var target = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
var form = target.form;
switch( target.name ) {
case 'TO_RIGHT' : moveItem( form, 'RIGHT_BOX', 'LEFT_BOX' ); break;
case 'TO_LEFT' : moveItem( form, 'LEFT_BOX', 'RIGHT_BOX' ); break;
default :
}
}, false );
function moveItem ( form, to_name, from_name ) {
var to = form.elements[ to_name ];
var items = form.elements[ from_name ].options;
for( var i = items.length - 1; i > -1; i -- ) {
items[ i ].selected && to.insertBefore( items[ i ], to.firstChild );
}
}
} ) ( );
</script>
<body>
<form action="#" class="xxx">
<fieldset>
<!-- <legend></legend> -->
<select name="LEFT_BOX" size="5" multiple>
<option value="item1">item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
<option value="item5">item5</option>
</select>
<span>
<input type="button" name="TO_RIGHT" value=">>">
<input type="button" name="TO_LEFT" value="<<">
</span>
<select name="RIGHT_BOX" size="5" multiple>
</select>
</fieldset>
</form>
</body>
</html>
# 超適当ですが、こういうことですか?
# 全角でインデントが入れてあるので、適当な文字に変換してください。
## うぉ、かぶった。まぁいいや。
No.4ベストアンサー
- 回答日時:
#2です。
すでにあるコードを修正したいのなら、最初にそれを提示すべき。
機能のみで質問すれば、返ってくる回答は人それぞれ少しずつ違う。ましてや、仕様が曖昧な質問なら、回答は千差万別で当然。
さて、ご提示のコードをどうしたいのかが、まだ不明ですね。
1)「→←」を押した時にボックス内で項目が移動するようにするのか
(#2,#3はそのように解釈している)、あるいは現状のままでよいのか。
2)今のものはそのままで、項目を追加した時に下に追加されているのを
前に追加するように修正しさえすればよいのか。
(#1,#2,#3ともご質問文の通り、先頭に追加するようにしている)
2)だけで良いのなら、現状の
ops[ops.length] = new Option(mop.text, mop.value);
の部分が明示的に最後に追加していますので、その部分を修正すれば宜しいかと。
>皆様の回答大変参考になりました。
では、参考にして、活用しましょう。
#1~#3、それぞれ少しずつ違う考え方や指定方法で要素を追加していますが、実際に、その部分で利用しているメソッドはみな同じです。
利用しやすい考え方を流用するのがよろしいかと思います。
>具体的な方法を教えていただければ~
↑のメソッドが具体的な方法に当たると言えるでしょう。insertBefore()
-------------------------------------------
<おまけ>
・form要素の取得にHTML内の順番を使っていますが、この方法だとHTMLを修正するとスクリプトの修正が必要になる場合があります。(formの順を入れ替えたり、追加したりした場合した場合)
idを振るなどして、ダイレクトに取得するのがよろしいかと。
( getElementById('id') )
・質問には関係ありませんが、前半のイベント設定部分(IE専用となっている部分)を一般化させたいのなら、#3様の回答に設定のヒントがあります。
参考になさってください。
回答ありがとうござます。
大変参考になりました。
そしてようやく問題解決にいたりました。
助言の方いろいろありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
連動プルダウンのclonenode
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
Javascriptでフォームのセレク...
-
<input>の選択肢をプルダウンメ...
-
selectが変更されたらnameを指...
-
何がおかしいのでしょうか?
-
2段階連動セレクトボックスでの...
-
セレクトメニューの選択項目に...
-
ボタンを押したらラジオボタン...
-
JavaScript プルダウンメニュ...
-
Selectボックスの一覧表示方法
-
セレクトボックスで警告
-
セレクトボックスで、最後にク...
-
プルダウンメニューに連動する...
-
selectを変更不可にしたい
-
VBScriptでHTMLのセレクトボッ...
-
データベースからのarray を j...
-
プルダウンの値をphpファイルへ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
同じ名前のセレクトがある場合...
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
スマホのフォームでのselect複...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
webページの一部のみの更新につ...
-
selectのすべての値を送信する方法
-
javascript:データを日本語で...
-
プルダウンのoptionの表示・非...
-
リストボックス内の重複したも...
-
select要素のvalueを配列で取得...
-
C#(csファイル)とjavascriptと...
おすすめ情報