- 締切済み
datalistのoptionの削除はできますか？
こんにちは。 今、htmlとJavascriptでinput要素の入力欄に入力した値を追加ボタンを押すとdatalistの入力候補に追加され、削除ボタンを押すと入力候補から値を削除するソースを作成しています。 入力候補から指定した値を削除するソースの書き方で困っています。 selectのoptionを削除する方法はネットでもたくさん紹介されていますが、datalistのoption削除はありませんでした。 方法をご存知の方はやり方をご教授ください。 よろしくお願いします。
- kinka2000
- お礼率43% (47/108)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
<!DOCTYPE html> <meta charset="utf-8"> <title>datalistのoptionを間引く</title> <style> </style> <body> <input type="search" name="q" autocomplete="on" list="keywords"> <input type="button" value="Delete" data-delete-for="keywords"> <datalist id="keywords"> <option value="Windows"> <option value="macOS"> <option value="Linux"> </datalist> <script> function handler ({target}) { if (target.hasAttribute ('data-delete-for')) {//要素に対象の属性があるか？ let doc = target.ownerDocument, key = target.getAttribute ('data-delete-for'), search = doc.querySelector (`input[list="${key}"]`); //data-delete-forが示すlist属性が同じinput要素を探す if (search) { let datalist = doc.getElementById (search.getAttribute ('list')), //datalist要素 val = search.value; //削除する値 if (datalist) { Array.from (datalist.options) .filter (op => op.value === val) //option要素群から同じ値のもの .forEach (op => datalist.removeChild (op)); //削除する search.value = ''; } } } } document.addEventListener ('click', handler, false); /* 削除するボタンとinput要素の関係がdata-delete-forと関連 づけられていれば複数のタグが対象になる なんだかゴールポストが動く質問が多いのですが、これは大丈夫だよね。 */ </script>
関連するQ&A
- option:selectedで想定の値が取れない
こんにちは。 今、htmlとJavascriptでinput要素の入力欄に入力した値を追加ボタンを押すとdatalistの入力候補に追加され、削除ボタンを押すと入力候補から値を削除するソースを作成しています。 Javascriptの方でテキスト欄に表示されている値を取得したいときはoption:selectedを指定するといいはずですが、リストの何を表示してもリストの一番上の値が削除されてしまいます。 datalistの中にselectを書いているせいなのかとも思いますが、分かりません。 どなたかご教授ください。お願いします。 ざっくりとソースを書くと以下のようになります。 【HTML】 <input type="text" value="" list="alphabet"> <datalist id='alphabet'> <select id='alphabet'> <option value='ABC'></option> <option value='DEF'></option> <option value='GHI'></option> <option value='JKL'></option> </select>
- 締切済み
- JavaScript
- Win版SafariのSELECT要素追加について
SELECTの要素を都度セットするJavaScriptを作りました。 下記ソースはSELECTの要素を一旦削除して、新しく1～ テキストボックスに入力した値までの要素を追加するscriptです。 <html> <hade> <script language="JavaScript"><!-- function creSel() { var to = Number(document.myFORM.myTEXT.value); document.myFORM.mySELECT.options.length = 0; for( i=0; i<to; i++ ) document.myFORM.mySELECT.options[i] = new Option(i+1); document.myFORM.mySELECT.selectedIndex = 0; } // --></script> </head> <body> <form name="myFORM"> 数値：<input type="text" name="myTEXT"> <input type="button" onClick="creSel()" value="SET"><br> <select name="mySELECT"> </select> </form> </body> </html> IE、FireFox、Opera等のブラウザでは問題なく動作しましたが、 Win版のSafariのみ正常に動作しません。 10とか20くらいの数値だと問題ありませんが、例えば25とか 入力して、一旦1～25までのSELECTにして、次に24と入力する と25の要素が残ります。しかし、25は選択できない様です。 更に、26と入力すると、26は追加されません。 これはどうやら、SELECTメニューにスクロールバーが出るらへん の要素数になると発生する問題の様です。 Win版Safariのバグだとは思われますが、 この問題を回避する何か良い方法は御座いませんでしょうか。 宜しくお願いします。
- ベストアンサー
- JavaScript
- リストボッックスからリストボックスへの値を追加したい
ASPのプログラムの中に Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに 追加できるようなスクリプトを作りたいのですが、 Request.Formで同ページにPOSTでsubmitして送っていたのですが それだと何度も追加ができなくなってしまうので他のやり方にしたいのです。 いろいろ調べてVBScriptやJavaScriptでできるのではないかというのまでは わかったのですが、どうもやり方がいまいちわかりません。 できればJavaScriptのほうでやりたいと思うのですがどなたか良い方法を ご教授いただけないでしょうか。 よろしくおねがいします。 <select size="5" multiple name="A"> </select><input type="submit" value="追加"><select size="5" multiple name="B"> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select>
- ベストアンサー
- 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
- <input>のvalue値をプルダウンメニューから受け取りたいのです
<input>のvalue値をプルダウンメニューから受け取りたいのですが、Javascriptを使用すれば出来るものでしょうか？もし可能でしたら、そのコードを教えて頂きたいです。 当方htmlとcssが少し出来る程度で、ウェブで調べても分からなかったので質問させていただきました。 以下はソースになります。 プルダウンのソース： <FORM> <SELECT> <OPTION SELECTED>SELECT</OPTION> <OPTION VALUE="AAABBB">A</OPTION> <OPTION VALUE="BBBBBB">B</OPTION> <OPTION VALUE="CCCCCC">C</OPTION> </SELECT> </FORM> ↑上で選択したvalueの値を、↓下の「ここの値」に渡したいです。 inputのソース： <input name="hosted_button_id" value="ここの値" type="hidden"> 宜しくお願いいたします。
- ベストアンサー
- 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
- テーブルへの挿入と削除
PHPにて追加を押すと、テーブルの最終リストに 「番号(1から連番)・商品名(プルダウン)・数量入力欄(text)・削除ボタン」 が挿入され、削除ボタンを押すと行が削除されるようにしたいのですが、今の状態ですと削除ボタンを押した場合、無条件に最終リストが 削除されてしまいます。 どうにかして削除ボタンを押した行が削除される様にしたいのですが？ ↓現在のソース 最初0から始まり追加を押すと＋1、削除を押すと－1。それをhiddenに与えその値の数だけ行を作成するようにしました。 $button=$_POST["add"]; if($button=="追加”){ $NOO=$NO+1; }else if($button=="削除"){ $NOO=$NO-1; } print "<input type=hidden name=NO value=$NOO>\n"; }else{ print "<input type=hidden name=NO value=0>\n"; } if(isset($_POST["add"])){ $count=0; for($i=0;$i<$NOO;$i++){ $count++; print "<tr><td align=right>$count</td><td ><select name=item[]>\n"; $sql = "select item_name from m_item order by item_code"; $col = pg_fetch_array($result); $col = pg_query($con, $sql); while($data = pg_fetch_array($col)){ > <OPTION VALUE="<?php $data['item_name'] ?>"> <?php echo $data['item_name'] ?> </OPTION> <?php } print "</select> </td>\n"; if(isset($kazu[$i])){ print "<td><input type=text size=10 name=kazu[] value=$kazu[$i]></td>\n"; }else{ print "<td><input type=text size=10 name=kazu[]></td>\n"; } print "<td><input type=submit name='add' value="削除" onclick =keisan()></td></tr>\n"; } }
- 締切済み
- PHP
- javascript 動的フォームの追加、削除について
JAVASCRIPTを使って、追加ボタンを押したときに、入力フォーム（textbox）を2個、3個と追加させ、入力フォーム横に設置した削除ボタンで削除ボタン横の入力フォームを削除したいと思っております。 1)delInput2()の引数でボタンごとの情報（何番目のボタンか）を渡したい。 どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <script type="text/javascript"> var arInput = 0; var Default = arInput; function addInput() { //追加処理 arInput ++ $("#area").append('<span id=\"group'+arInput+'\"><input type=\"text\" name=\"text'+arInput+'\" value=\"入力項目'+arInput+'\" /><input type=\"button\" onclick=\"delInput2()\" name=\"button'+arInput+'\" value=\"削除'+arInput+'\" /><br></span>\n'); } function delInput() { //削除処理 $("#group"+arInput).remove(); if(arInput > Default){ arInput -- } } function delInput2() { //指定項目削除処理 } </script> <form> <fieldset id="area"> <fieldset> <input type="button" onclick="addInput()" value="一行追加" /> <input type="button" onclick="delInput()" value="一行削除" /> </fieldset> </form>
- ベストアンサー
- JavaScript
- HTML5のautocompleteについて
こんにちは。 HTML5のautocompleteについて質問があります。 HTML5のautocompleteでは、初期値の設定は出来ないのでしょうか？ 例えば、 <input type="text" list="hoge" autocomplete="on"> <datalist id="hoge"> <option value="1">A <option value="2">B <option value="3">C </datalist> とあるとき、select属性の「selected」のように、最初からBが入力された状態にしたいのですが、どのように書けば良いのでしょうか。 それとも、input属性なのでselectedは使えないのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- JAVASCRIPTで、ボタンを押したら 入力項目を追加できるようにしたい。
FORMタグ内に下記のようなの入力項目があります。 JAVASCRIPTを使って、追加ボタンを押したときに、下記の部分を2個、3個と追加させたいと思っております。 (最初から複数個分の入寮力フォームを用意しておくと、見た目が良くないため、追加ボタンで随時追加するようにしたい） どのようなjavascriptを書けばよいか、ご教授願えませんでしょうか。 どうぞよろしくお願い致します。 <select> <option value=" " selected="selected">選んでください</option> <option value="テスト1">テスト1</option> <option value="テスト2">テスト2</option> <option value="テスト3">テスト3</option> </select> <br class="spacer"> </div> <div class="forms"> <label>テーブル1</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル2</label> <input type="text" name="textfield" id="textfield" /> <label>テーブル3</label> <input type="text" name="textfield" id="textfield" class="short" /> <div class="btns"> <input type="button" value="送信" /> <input type="button" value="さらに入力項目を追加する" /> <input type="button" value="クリア" /> </div>
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 参考にさせていただきます。