セレクトボックスの操作についての質問

前へ 次へ
このQ&Aのポイント
  • セレクトボックスの操作方法について質問です。
  • 特定の選択肢以外を表示するセレクトボックスの作成方法について教えてください。
  • セレクトボックスの値を追加・削除する方法を教えてください。
回答を見る
  • ベストアンサー

セレクトボックスの操作

<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="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか？ ご教示頂けますと幸いです。 宜しくお願いいたします。

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

  • ベストアンサー
回答No.3

No1で回答したものです。諸事情により、再回答となります。 恐らく仕様は満たしていると思いますが、やっつけ仕事なのでプログラムの質は低いです。 どういった経緯でご質問されたかは分かり兼ねますが、なるべく処理ごとにコメントを入れましたので、しっかり解析し自分の知識として取り入れて頂ければ幸いです。 プログラムに関してご質問がありましたら遠慮なくどうぞ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> /* 追加関数 */ function addBtn(obj){ // 複製要素ID var slcId = $(obj).parents("div").attr('id'); // 追加要素ID var apdId; // 複製要素取得 var elm = $("#" + slcId).clone(true); // 追加要素id変更 var idFlg; var divIdList = []; var divList = $("body div"); $(divList.each(function() { divIdList.push($(this).attr('id')); })); for(var i = 1; i <= 5; i++) { if($.inArray(i.toString(), divIdList) == -1) { elm = $(elm).attr("id", i); apdId = i; break; } } // 追加セレクトボックス要素取得 selectElm = $(elm).children("select"); // 追加セレクトボックス要素id変更 selectElm.attr("id", "example" + apdId); // 選択された項目を削除 selectElm.children("[value=" + $("#example" + (slcId)).val() + "]").remove(); // セレクトボックス追加 $("#" + slcId).after(elm); // 追加ボタン非表示 $("#" + slcId).children("input[name='add']").css("display","none"); // 取り消しボタン表示 $("#" + slcId).children("input[name='cancel']").removeAttr("style"); // セレクトボックスの項目が1つになったら追加ボタン非表示、かつ取り消しボタン表示 if(selectElm.children().length == 1) { $("#" + apdId).children("input[name='add']").css("display","none"); $("#" + apdId).children("input[name='cancel']").removeAttr("style"); } // 削除値保存 $("#select" + slcId).val($("#example" + (slcId)).val()); } /* 取り消し関数 */ function cancelBtn(obj){ // 削除要素ID var slcId = $(obj).parents("div").attr('id'); // 削除値取得 var delVal = $("#select" + slcId).val(); // 取り消し要素削除 $("#" + slcId).remove(); // 1番新しい要素取得 var lastElm = $("body div:last-child"); // 削除された項目を追加 if(slcId != 5) { // 最後の要素以外が選択された場合 var addFlg = true; // optionに項目が既に存在するか判定 $(lastElm.children("select").children()).each(function() { if($(this).val() == delVal) { addFlg = false; } }); // optionに項目が存在しない場合 if(addFlg) { lastElm.children("select").append($('<option>').html(delVal).val(delVal)); // optionを昇順にソートし再追加 var sortOptionList = lastElm.children("select").children().sort(function(a, b){ var x = a.value; var y = b.value; if (x > y) return 1; if (x < y) return -1; return 0; }); lastElm.children("select").children().remove(); lastElm.children("select").append(sortOptionList); } } // div要素が残り2つで最後の要素が選択された場合 if($("body div").length == 1) { lastElm.children("select").children().remove(); for(var i = 1; i <= 5; i++) { lastElm.children("select").append($('<option>').html(i).val(i)); } } // 要素が1つになったら追加ボタン表示、取り消しボタン非表示 if(lastElm.children("select").children().length == 5) { lastElm.children("input[name='add']").removeAttr("style"); lastElm.children("input[name='cancel']").css("display","none"); // id初期化 lastElm.children("select").attr("id", "example1"); lastElm.attr("id", "1"); } } </script> </head> <!-- 削除値保存用 --> <input type="hidden" id="select1" value=""> <input type="hidden" id="select2" value=""> <input type="hidden" id="select3" value=""> <input type="hidden" id="select4" value=""> <body> <div id="1"> <select id="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="button" onclick="addBtn(this);" name="add" value="追加"> <input type="button" onclick="cancelBtn(this);" name="cancel" style="display: none;" value="取り消し"> </div> </body> </html>

happyprice
質問者

お礼

回答ありがとうございました。 丁寧な回答に感謝いたします。 部分ごとに説明をしてくださったおかげで勉強がしやすいです。 ありがとうございました。

その他の回答 (2)

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

送信後の処理はサーバーサイドのプログラムに任せるべきです。 また数字から始まる要素名もなるべくなら採用しないほうが無難です

happyprice
質問者

お礼

回答ありがとうございました。 とても参考になりました。

回答No.1

取り消しボタン押下時の処理が途中ですが。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> // 追加関数 function addButton(obj){ // 複製要素ID var selectId = $(obj).parents("div").attr('id'); // 追加要素ID var appendId = parseInt(selectId) + 1; // 複製要素取得 var elm = $("#" + selectId).clone(true); // 追加要素id変更 elm = $(elm).attr("id", appendId); // 追加セレクトボックス要素取得 selectElm = $(elm).children("select"); // 追加セレクトボックス要素id変更 selectElm.attr("id", "example" + appendId); // 選択された項目を削除 selectElm.children("[value=" + $("#example" + (selectId)).val() + "]").remove(); // セレクトボックス追加 $("#" + selectId).after(elm); // 追加ボタン非表示 $("#" + selectId).children("input[name='add']").css("display","none"); // 取り消しボタン表示 $("#" + selectId).children("input[name='cancel']").removeAttr("style"); // セレクトボックスの項目が1つになったら追加ボタン非表示、かつ取り消しボタン表示 if(selectElm.children().length == 1) { $("#" + appendId).children("input[name='add']").css("display","none"); $("#" + appendId).children("input[name='cancel']").removeAttr("style"); } // 削除値保存 $("#select" + selectId).val($("#example" + (selectId)).val()); } // 取り消し関数 function cancelButton(obj){ // 削除要素ID var selectId = $(obj).parents("div").attr('id'); // 削除値取得 var delVal = $("#select" + (parseInt(selectId) - 1)).val(); // 取り消し要素削除 $("#" + selectId).remove(); // 1番新しい要素取得 var lastElm = $("body div:last-child"); // 削除された項目を追加 if(selectId != 5) { // 最後の要素以外が選択された場合 lastElm.children("select").append($('<option>').html(delVal).val(delVal)); } // セレクトボックスの項目が5つになったら追加ボタン表示、取り消しボタン非表示 if(lastElm.children("select").children().length == 5) { $("#" + (parseInt(selectId) - 1)).children("input[name='add']").removeAttr("style"); $("#" + (parseInt(selectId) - 1)).children("input[name='cancel']").css("display","none"); } } </script> </head> <!-- 削除値保存用 --> <input type="hidden" id="select1" value=""> <input type="hidden" id="select2" value=""> <input type="hidden" id="select3" value=""> <input type="hidden" id="select4" value=""> <body> <div id="1"> <select id="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="button" onclick="addButton(this);" name="add" value="追加"> <input type="button" onclick="cancelButton(this);" name="cancel" style="display: none;" value="取り消し"> </div> </body> </html>

happyprice
質問者

お礼

回答ありがとうございます。 長文の回答、大変助かります。感謝申し上げます。 追加の挙動はイメージ通りとなりました。ありがとうございますm(__)m あとは取り消し時の機能を加えたいです。 もしお時間があるときにアドバイス頂けますと幸いです。 宜しくお願いいたします。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 読み込む外部スクリプトをセレクトボックスを使って選べないでしょうか？

    お世話になります。 フォーム内に配置した、１から５までの数字を選べるセレクトボックスを使って、そのフォーム内に読み込む.jsファイルを選択することは出来ないでしょうか？ 外部ファイルには、UsualSet.js、EmergencySet.js、PauseSet.jsなどがあって、そのスクリプトファイルの中身は document.write("<input name=\"youbi\" type=\"hidden\" value=\"土曜\"><input name=\"codenumber\" type=\"hidden\" value=\"732\"><input name=\"busho\" type=\"hidden\" value=\"経理\">"); とかいった感じになっています。 つまり、セレクトボックスで何番を選ぶかによって、CGIに渡す値を$youbiと$codenumberと$bushoとの３つ全ていっぺんに変更出来るようにしたい訳です。 しかし、そのセレクトボックスにどういう仕掛けをしたら良いかわからなくて困っています。 まさか、 <FORM ACTION="pro.cgi" METHOD="POST"> 　<select name="kazu"> 　　<option value="<script language="javascript" src="UsualSet.js>" selected>1</option> 　　<option value="<script language="javascript" src="EmergencySet.js>" >2</option> 　　<option value="<script language="javascript" src="PauseSet.js>" >3</option> 　　<option value="<script language="javascript" src="MorningSet.js>" >4</option> 　　<option value="<script language="javascript" src="FulleSet.js>" >5</option> 　</select> 　 <input type="hidden" name="kaijou" value="22890"> 　<input type="hidden" name="boxnumber" value="62"> 　<input type="submit" name="Submit" value="送信"> </FORM> なんてわけに行かないですもんね。 どうしたらいいかおわかりの方がいらっしゃいましたら、どうかよろしくお願い致します。

  • セレクトボックスの値を増やしたい

    お世話になります。 セレクトボックスのOPTION値を増やしたいのですが、何か良い方法はないでしょうか。 実現したいことは、ボタンを押したときにテキストボックスの値をセレクトボックスの最下部に表示したいということです。 <INPUT TYPE="text" NAME="add_txt" VALUE=""> <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc </SELECT> <INPUT TYPE="button" NAME="ent" VALUE="実行"> ------------------ この状態からtextに"ddd"という値を入れて実行ボタンを押した後、 <SELECT NAME="lst"> <OPTION VALUE="aaa">aaa <OPTION VALUE="bbb">bbb <OPTION VALUE="ccc">ccc <OPTION VALUE="ddd">ddd </SELECT> このような状態にしたいのですが、なにか方法はありますか。 ご存知の方いましたら、回答お待ちしています。

  • セレクトボックスを無効に出来なくて困っています

    このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <form method="POST" name="form01"> <script language="javascript" type="text/javascript"> <!-- function swDis() { fObj = document.form01; fObj.sentaku01.disabled = (fObj.namae[0].checked) ? false : true ; fObj.sentaku02.disabled = (fObj.namae[1].checked) ? false : true ; fObj.sentaku03.disabled = (fObj.namae[2].checked) ? false : true ; } //--> </script> <p> <input type=radio name="namae" value="AAA" onclick="swDis()" checked /> sentaku01 <select name="sentaku01" id="sentaku01"> <option>選択肢１</option> <option>選択肢２</option> <option>選択肢３</option> </select> <br /> <input type=radio name="namae" value="BBB" onclick="swDis()" /> sentaku01 <input type=text name="sentaku02" disabled /> <br /> <input type=radio name="namae" value="CCC" onclick="swDis()" /> sentaku01 <input type=text name="sentaku03" disabled /> <br /> <input type=radio name="namae" value="sentaku04" onclick="swDis()" /> sentaku04<br /> <input name="" type="submit" value="送信する" /> </p> </form> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか？ 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。

  • セレクトボックスを使った計算式

    テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ 　　　　if(option value="＋"){ 　　　　document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。

  • セレクトボックスとチェックボックスを使った絞込み検索

    Yomi-Searchについての質問なのですがタイトルの通りの質問でチェックボックスを使った絞り込み検索では 01_03 04_01 と検索結果に表示されるのですがセレクトボックスとチェックボックスを組み合わせて絞り込み検索をしてみると 01_0304_01 とこのようにカテゴリとカテゴリの間にスペースが入らず絞り込み検索が出来ません‥ タグはこのように書きました。 <FORM action="http://www..." method="get" target="" name="form1"> <INPUT type="hidden" name="mode" value="search"> <INPUT type="hidden" name="page" value="1"> <INPUT type="hidden" name="sort" value="mark"> <INPUT type="hidden" name="engine" value="pre"> <INPUT type="hidden" name="kn" value="30"> <SELECT size="1" name="word"> <OPTION type="selected" value="">--------</OPTION> <option value="01_01" name="word1">○○○</option> <option value="01_02" name="word2">○○○</option> <option value="01_03" name="word3">○○○</option> </SELECT><BR> <BR> <INPUT type="checkbox" name="word4" value="04_01">○○○<BR> <INPUT type="checkbox" name="word5" value="04_02">○○○<BR> <INPUT type="checkbox" name="word6" value="04_03">○○○<BR> <BR> <INPUT type="submit" value=" 検 索 "> <INPUT type="reset" value="リセット"> &nbsp; </FORM> 全くの初心者ですいませんが良きアドレスなどをお願いします。

  • select値をhiddenのvalueに渡したい

    selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して、 hiddenのvalue値(id)がselectで選択されたvalue値になるような フォームを作りたいのですが、作り方をお教え頂ければ幸いです。 <form name="form" method="get" action="index.cgi"> <select name="mode"> <option value="100023">和書</option> <option value="100241">洋書</option> <option value="100524">エレクトロニクス</option> </select> <input type="hidden" name="serch_janru" value="id" /> <input type="text" name="keyword" value="keyword" /><input type="submit" name="submit" value="商品を検索" /> </form> ソース等、具体的にお教え頂けると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトボックスのボタンにリンクを張りたい

    下記のHTML文においてセレクトボックスの表示ボタンを押したら、リンク先にジャンプをしたいのですがその方法を教えていただけませんか． <FORM ACTION='' METHOD='POST'> <SELECT name="code"> <OPTION value='1'>A</OPTION> <OPTION value='2'>B</OPTION> </SELECT> <INPUT TYPE=SUBMIT VALUE='表示'>

    • ベストアンサー
    • PHP
  • javascriptについての質問です。複数の一つのselect等で選

    javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　a">a</OPTION> <OPTION VALUE="　b">b</OPTION> <OPTION VALUE="　c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE="　壱">壱</OPTION> <OPTION VALUE="　弐">弐</OPTION> <OPTION VALUE="　参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?

  • 複数のセレクトボックスを1つにまとめて受け渡すには

    現在"年"と"月"のセレクトボックスがあり下記のように受け渡されています <form action="./search.php" method="GET"> 　<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="12">12月</option> 　</select> 　<input type="submit" value="検索"> </form> 受け取り側 http://www.###.jp/search.php?year=2011&month=11 となっています。 これを dateに一まとめにして受け取りたいですが http://www.###.jp/search.php?date=201111（2011-11でも可） 選択するプログラム側の修正方法を教えて欲しいのですが。 宜しくお願い致します。

    • ベストアンサー
    • PHP
  • セレクトボックスの連動

    セレクトボックスＡを切り替えると、他のセレクトボックスがＡと同じになるようなものを作りたいのですが、うまくいきません。 ソースは以下の通りです。 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の時もある、という場合にはどういう風に書けばいいのかわかりません。 どのように記述すれば良いのでしょうか。アドバイスお願いします＞＜

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する