こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

回答受付中の質問

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>

投稿日時 - 2017-06-19 22:56:46

QNo.9343046

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

テキスト欄に表示されている値を、テキストボックスのvalueから取得してはいかがでしょうか。
具体的にはテキストボックスに適当なidをつけた上で、
document.getElementById("テキストボックスのid").value
とすれば想定の値が取れるかと思います。

投稿日時 - 2017-06-19 23:39:36

補足

ありがとうございます。
確かにその方法でも想定の値は取れるのですが、removeで上手く削除できなかったので、できればoption:selectedで指定したいと思っているのですが、無理なのでしょうか?

投稿日時 - 2017-06-20 22:36:03