コンボボックスの項目の削除方法
- コンボボックスのある項目を選択した状態で「削除」ボタンを押すことにより、その項目を削除するプログラムの作成方法について教えてください。
- 質問文章では、コンボボックスの項目を選択した状態で「削除」ボタンを押すことにより、その項目を削除するためのプログラムの作成方法について教えてほしいです。
- コンボボックスの項目を選択した状態で「削除」ボタンを押すことにより、その項目を削除するプログラムの作成について教えてください。
- ベストアンサー
コンボ(?)ボックスの項目の削除方法
タイトルどおりの質問なんですが、 コンボ(?)ボックスのある項目を選択した状態で「削除」ボタンを押すことにより その項目を削除する。というプログラムを作成しています。 ちなみにコードは以下のようになっています。 <INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();"> <SELECT Name="Option" MULTIPLE SIZE=10 > <OPTION value="01">１</OPTION> <OPTION value="02">２</OPTION> <OPTION value="03">３</OPTION> <OPTION value="04">４</OPTION> <OPTION value="05">５</OPTION> <OPTION value="06">６</OPTION> <OPTION value="07">７</OPTION> <OPTION value="08">８</OPTION> <OPTION value="09">９</OPTION> <OPTION value="10">１０</OPTION> </SELECT> function deldata(){ ・・・ ・・・ } この function deldata()の中の処理方法について教えてください。 初歩的な質問と思いますが、よろしくお願いします。
- compal
- お礼率70% (17/24)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Hello! It's Anser. <script language="javascript"> <!-- function deldata(){ var itemIndex = document.all("Option").selectedIndex; if (itemIndex >= 0) { document.all("Option").options[itemIndex] = null; } } //--> </script> <INPUT TYPE="BUTTON" name="Catdel" VALUE="削除" onClick="deldata();"> <SELECT Name="Option" MULTIPLE SIZE=10 > <OPTION value="01">１</OPTION> <OPTION value="02">２</OPTION> <OPTION value="03">３</OPTION> <OPTION value="04">４</OPTION> <OPTION value="05">５</OPTION> <OPTION value="06">６</OPTION> <OPTION value="07">７</OPTION> <OPTION value="08">８</OPTION> <OPTION value="09">９</OPTION> <OPTION value="10">１０</OPTION> </SELECT>
関連するQ&A
- リストボックスの内容追加と削除
質問QNo.172288を参考にプログラムを作成しました。 そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。 Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除（非表示）あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。（重複チェックみたいな感じです） それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、Bのリストボックスに表示させる JavaScriotでは難しいいですか。ご教授いただけないでしょうか 宜しくお願いします <form name=frm method=post action=/beta/index.php> <td align=right> <select name=A size=8 multiple> <option value=""></option> </select> </td> <td align=center> <input type=button value="← 追加" onClick="addItem();"> <p> <input type=button value="戻す →" onClick="delItem();"> <td align=left> <select name=B size=8 multiple> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </td> function addItem() { A = document.frm.A; B = document.frm.B; for (var i=0; i<B.options.length; i++) { if (B.options[i].selected) { A[A.options.length] = new Option(B.options[i].text,B.options[i].value); } } } function delItem() { B = document.frm.A; A = document.frm.B; for (var i=0; i<B.options.length; i++) { if (B.options[i].selected) { A[A.options.length] = new Option(B.options[i].text,B.options[i].value); } } }
- ベストアンサー
- JavaScript
- 動的なセレクトボックスの生成と削除
CGI（Perl）で、Javascriptを用いWEBアプリケーションを作成しています。 その過程で、追加ボタンを押すとセレクトボックス（５つでひとかたまりです）が増えるJavascriptを作成しています。 しかし、残念ながら削除をする機能をどうしていいか思いつきませんのでお知恵を貸してください。（また、増加ボタンも他にいい方があレバよろしくお願いします。） 今までに作成したのは以下のとおりです。 **********Javascript*********** var copy; function addInput() { copy = document.getElementById('plus') copy.innerHTML="Filter: <select name='condition'> <option value='and'>AND</option> <option value='or'>OR</option> </select> <select onchange='SetSubMenu(value);'> <option value='Werkstoff'>1.Werkstoff</option> <option value='Shiftfaktor'>2.Shiftfaktor </option> <option value='SurfCorr'>3.SurfCorr</option> </select> <select name='condition'> <option value='like'>like</option> <option value='notlike'>not like</option> <option value='equal'>=</option> <option value='<'><</option> <option value='>'>></option> <option value='<='><=</option> <option value='>='>>=</option> </select> <div id ='Werkstoff' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGWERK> <option value='<TMPL_VAR NAME=WERKSTOFF>'><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP></select></div> <div id ='Getriebe' class='secondpulldown'> <select><TMPL_LOOP NAME=EINTRAGETRIEBE> <option value='<TMPL_VAR NAME=GETRIEBE>'><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP></select></div> <input type='button' onclick='addInput()' value='+'> <input type='button' onclick='delInput()' value='-'> <div id='plus'></div>" } </script> **********stylesheet************* <style type="text/css"><!-- .secondpulldown { display: none; } --></style> <table> <tr> <td>Datenbank:</td> <td colspan="5"> <select name="datenbank"> <option value="bank1">DATEN BANK 1</option> </select> </td> </tr> <tr> <td>Filter:</td> <td> <select name="condition"> <option value="and">AND</option><option value="or">OR</option> </select> </td> <td> <select onchange="SetSubMenu(value);"> <option value="Werkstoff">1.Werkstoff</option> <option value="Shiftfaktor">2.Shiftfaktor </option> <option value="SurfCorr">3.SurfCorr</option> </select> </td> <td> <select name="condition"> <option value="like">like</option> <option value="notlike">not like</option> <option value="equal">=</option> <option value="<"><</option> <option value=">">></option> <option value="<="><=</option> <option value=">=">>=</option> </select> </td> <td> <div id ="Werkstoff" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGWERK><option value="<TMPL_VAR NAME=WERKSTOFF>"><TMPL_VAR NAME=WERKSTOFF></option></TMPL_LOOP> </select> </div> <div id ="Getriebe" class="secondpulldown"> <select> <TMPL_LOOP NAME=EINTRAGETRIEBE><option value="<TMPL_VAR NAME=GETRIEBE>"><TMPL_VAR NAME=GETRIEBE></option></TMPL_LOOP> </select> </div> </td> <td> <input type="button" onclick="addInput()" value="+"> <input type="button" onclick="delInput()" value="-"> </td> </tr> <tr> <td colspan='6'><div id="plus"></div></td> </tr> </table> よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <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文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- リストボックス全選択について
JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
- Selectの項目へのアクセス
Selectを二つ並べ、左で選択されている項目の内容を右のSelectに追加したいのですが、色々わかりません。 ・項目内容を文字列の取得方法は？ ・項目の追加方法は？ ・項目内容を書き換えるには？ 忙しい時期で恐縮なんですが、よろしくお願いいたします。 <title>新しいページ 1</title> <SCRIPT LANGUAGE="JavaScript"> <!--- function list(src,dst){ for(i=0;i<src.length;i++){ if (src.options[i].selected == true) dst.options[0].value = src.options[i].value; } } //---> </SCRIPT> </head> <body> <form method="POST" name="PostForm"> <table border="0" width="100%"> <tr> <td width="7%"> <select size="5" name="MemberList" multiple> <option>Ａ氏</option> <option>Ｂ氏</option> <option>Ｃ氏</option> <option>Ｄ氏</option> <option>Ｅ氏</option> <option>Ｆ氏</option> </select></td> <td width="70%"> <select size="5" name="AssignedList" multiple> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select></td> </tr> </table> <p><input type="button" value="ボタン" name="B3" onclick="list(MemberList,AssignedList)"></p> </form> </body> </html>
- 締切済み
- JavaScript
- Javascriptでselectボックス項目削除
いつも参考にさせていただいておりますsasaloと申します。 早速ですが、javascriptで分からないことがありご質問させていただきます。 どなたかお知恵・お分かりになるかたがおりましたらどうぞご教授いただけないでしょうか？ よろしくお願いします。 行いたいことは、htmlページを読み込んだタイミングでselectボックスの最後の廃番商品の項目を1つだけ削除したく思います。 最後の項目ということになります。 ソースコードは、簡潔に書かせていただきました。 ソースコードは、 <form action="search.php" method="get" name="form"> <select name="situation"> <option value=""></option> <option value="販売中">販売中</option> <option value="在庫切れ">在庫切れ</option> <option value="廃番商品">廃番商品</option> </select> </form> システムを使用しておりまして、変数をhtmlに挿入すると自動的にselectボックスが表示されるようになります。 検索に使用しておりまして、廃番商品の検索は利用しないのでjavascriptにて削除できたらと思います。 いろいろと調べたのですが、inputボタンを押したら消せるなどの情報はありましたがちょっと使用方法がちがいまして・・・。 誠にお手数ですみませんがどなたかお分かりになられる方がおりましたらソースコードをご教授いただけないでしょうか？ また、簡単でももちろんかまいませんのでソースコードのご説明をいただけないでしょうか？ どうぞよろしくお願いします。 from sasalo
- ベストアンサー
- JavaScript
- セレクトボックスの操作
<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="追加"> 上記のようになります。 どのように記述すれば実現可能でしょうか？ ご教示頂けますと幸いです。 宜しくお願いいたします。
- ベストアンサー
- JavaScript
- リストボックスに追加した全ての値を取得したいのですが・・・
No.172288で質問したものですが まだJavaScriptを勉強しはじめたばかりでまた壁にぶつかってしまいました。 Bのリストボックスの値をAに追加して他のページにPOSTで送りたいのですが Aに追加された値をすべて送りたいのです。 それで、まずすべての値をとれるかどうかを確認するためにSubmitボタンを押して すべてを表示させるものを作ってみたのですが、どうしても 一番目（つまりiが0のAAAAA）しか表示できません。 エラーも出ないのでどこが間違っているのかがわからないのですが どこが間違っているのでしょうか。 何度もすみませんがよろしくおねがいします。 <html> <head> <title></title> </head> <script type="text/JavaScript"> <!-- function addItem() { A = document.X.A; B = document.X.B; for(var i=0;i<B.options.length;i++) if(B.options[i].selected) A[A.options.length] = new Option(B.options[i].text, B.options[i].value); } function func(){ for(var w=0;w<A.options.length;w++) document.write(A.options[w].text); } // --> </script> <body> <form name="X"> <select size="5" multiple name="A"> </select> <input type="button" value="Copy" onClick="addItem()"> <select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </form> <form name="Y"> <input type="button" value="Submit" onClick="func()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- ２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- セレクトボックスを無効に出来なくて困っています
このサイトで拝見したソースを参考に、ラジオボタンで選択した項目以外のテキストボックスなどが無効になる仕組みの、以下のようなフォームを作りました。 <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> しかし、この方法ですと、最初にフォームが表示された段階ではセレクトボックスが生きてしまい、他のいずれかのラジオボタンをクリックしないとセレクトボックスがグレーアウトしてくれません。 フォームが表示された時点ですぐにセレクトボックスをグレーアウトさせる方法はないでしょうか？ 対策をご存じの方がいらっしゃいましたらどうかよろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
同じ内容のプログラムをVbscriptで作成してみました。。 どちらでも、正常に動作しました。 ありがとうございました。