痔になりやすい生活習慣とは?

二つのセレクトボックス間でのデータのやり取りを行おうと思うのですが、
左右にセレクトボックスを設置して右から左、左から右といった感じで作成しようと思います。
そこでデータの受け渡しでセレクトボックスの上から値を追加していくことは可能なのでしょうか?
それともし可能なのであれば具体的な方法を教えていただければとおもいます。
どうぞよろしくお願いいたします。

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

A 回答 (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様の回答に設定のヒントがあります。
参考になさってください。
    • good
    • 0
この回答へのお礼

回答ありがとうござます。
大変参考になりました。
そしてようやく問題解決にいたりました。
助言の方いろいろありがとうございました。

お礼日時:2009/09/09 13:19

<!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="&gt;&gt;">
   <input type="button" name="TO_LEFT" value="&lt;&lt;">
  </span>
  
  <select name="RIGHT_BOX" size="5" multiple>
  </select>
 </fieldset>
</form>
</body>
</html>

# 超適当ですが、こういうことですか?
# 全角でインデントが入れてあるので、適当な文字に変換してください。
## うぉ、かぶった。まぁいいや。
    • good
    • 0

ご質問の意味がよくわかりませんが…



勝手に想像して、こういうことでしょうか?
<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);">&gt;&gt;</button>
<p><button onclick="move(1);">&lt;&lt;</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>
    • good
    • 0

>上から値を追加



だけでまず考えてみるとして

<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');" />

補足日時:2009/09/08 13:38
    • good
    • 0

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

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

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

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

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

Qタグの幅設定

空白のリストボックスを作成し、別ページで選択した内容をそのリストボックスに登録する仕組みを作ろうとしています。

普通に
****************
<select size=~>
<option></option>

</select>
****************
とすると、リストボックスの幅が1文字分ぐらいのサイズになってしまいます(内容を登録すれば、最大文字長内容に対応したサイズになります)。
<option>タグの中に空白を埋めるという方法もあるのですが、他の処理も修正しないといけなくなるので、最後の奥の手としか使いたくありません。

<option>タグ内、もしくはjavascript内で設定する方法ってあるんでしょうか?

Aベストアンサー

-> 「ひとまず」というのは、設定ピクセル以上の長さの内容が登録された場合、
-> 表示が見切れてしまう問題が発生するからです。
-> でも、リストボックスにスクロールバーはつけられませんよね・・・?

そうでした。

[ リストボックスオブジェクト ].style.pixelWidth=[ 整数値 ]

で、JavaScriptからサイズ変更できます。
ですが、登録された内容( 文字列の長さ )を如何にしてピクセル値に変換する
かが、悩みどころだと思います。
(プロポーショナルフォントだと文字によっては同じ文字数でも表示幅は違って
きますから・・・)

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む


人気Q&Aランキング