質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

5回答

40506閲覧

入力可能なセレクトボックスを作りたいです。

satoutail

総合スコア9

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/08/27 12:24

編集2018/08/27 12:26

前提・実現したいこと

セレクトボックスに直接テキストデータの入力が可能なものを作りたいのですが、良い方法がありましたら教えてください。
(入力もできるし、選択もできるイメージを想定しております。)

発生している問題・エラーメッセージ

手段の一つとして、「datalist」というのがあることを知ったのですが、これだと、Chromeでは問題ないのですが、IEやFireFoxでは問題が発生してしまいました。 参考URL: Chromeでは「onchange」イベントを使った場合、「セクトボックスを選択したタイミングでイベントが発生する(理想の動き)」のに対して、IEとFireFoxでは「セレクトボックスを選択後、フォーカスを移動したらイベントが発生する」という違いがありました。 Chromeのように、IE、FireFoxで「セクトボックスを選択したタイミングでイベントが発生する」する方法はないものでしょうか? あるいは、別の方法で、セレクトボックスに直接テキストデータを入力できる方法はないでしょうか?

該当のソースコード

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>datalistのテスト</title> 6<script> 7function getSelectData(obj){ 8 alert("onchangeイベントが発生しました。"); 9} 10</script> 11</head> 12<body> 13<input list="testList" id="testId" name="testName" onchange="getSelectData(this)" /> 14 15<datalist id="testList"> 16 <option value="test1"> 17 <option value="test2"> 18 <option value="test3"> 19 <option value="test4"> 20</datalist> 21</body> 22</html>

試したこと

datalistタグを利用して、Chrome、IE、FireFoxで試しました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答5

0

コード

HTML

1<input list="testList" id="testId" name="testName" /> 2<datalist id="testList"> 3 <option value="test1"> 4 <option value="test2"> 5 <option value="test3"> 6 <option value="test4"> 7</datalist> 8<script> 9'use strcit'; 10document.getElementById('testId').addEventListener('input', function handleInput (event) { 11 console.log(event.target.value); 12}, false); 13</script>

参考

Re: satoutail さん

投稿2018/08/27 12:36

編集2018/08/27 23:15
think49

総合スコア18170

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自作することにこだわりがないのならこういうものもあります。
selectize.js

投稿2018/08/27 13:19

spookybird

総合スコア1803

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

別にこだわりがなければテキストボックスと付随するセレクトボックスを
用意するだけでは?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 document.querySelector('#fuga').addEventListener('change',function(e){ 4 var t=e.target; 5 document.querySelector('#hoge').value=t.value; 6 t.selectedIndex=0; 7 }); 8}); 9</script> 10<form> 11<input type="text" name="hoge" id="hoge" value=""><br> 12<select id="fuga"> 13<option value="">選択する</option> 14<option value="a">AAA</option> 15<option value="b">BBB</option> 16<option value="c">CCC</option> 17<option value="d">DDD</option> 18</select><br> 19<input type="submit" value="go"> 20</form> 21

投稿2018/08/27 12:40

yambejp

総合スコア115034

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

皆さんありがとうございます。
色々と模索して行く内に、下記URLの3番の方法で実現ができました。
http://www.shurey.com/js/labo/combobox.html

ご回答いただいた内容も参考にさせていただきます。

投稿2018/08/29 15:05

satoutail

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

皆さんありがとうございます。
色々と模索して行く内に、下記URLの3番の方法で実現ができました。
http://www.shurey.com/js/labo/combobox.html

ご回答いただいた内容も参考にさせていただきます。

投稿2018/08/29 15:04

satoutail

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

showkit

2018/08/29 15:08

解決したのであれば、それをベストアンサーとして 解決済にしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問