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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

JavaScriptでのComboBox のようなもの

BeatStar
BeatStar

総合スコア4956

HTML5

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

JavaScript

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

HTML

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

2回答

0グッド

0クリップ

4835閲覧

投稿2016/12/12 04:21

編集2016/12/12 07:03

avaScriptに挑戦しています。

HTMLに ComboBox ( テキストボックス + リストボックス ) に当たるものがないので、

datalistタグというものでやっています。

( HTML といっても HTML5 です。 )

HTML

1 <form name="Asking"> 2 <label id="TextBoxForKeyword"> 3 キーワード:<input type="text" name="KeyWordEdit" list="KeywordsList"> 4 </label> 5 <datalist id="KeywordsList"> 6 <option value="選択肢A"></option> 7 <option value="選択肢B"></option> 8 <option value="選択肢C"></option> 9 <option value="選択肢D"></option> 10 <option value="選択肢E"></option> 11 </datalist> 12 </form>

という風にして、

テキストボックスにキーワードを入れて 検索かけたりする場合で、

datalistにないキーワードの場合は alert で "キーワードが間違っている" といったメッセージを表示するとします。

メッセージ表示はいいですが、

datalistにないキーワード ... っていうのがわからないのです。

C/C++ & WinAPI や ExcelVBA, Java 等の場合は ComboBox ( 名称が違ったりするが。 ) のインデックスが -1 のときは、

「リストにないデータ」なので、やりやすいですが、HTML+JavaScriptの場合、それができないようなので、どうすればいいか...

上記コードの場合は、

選択A ~ 選択E までのデータなら OK で、選択F等のようにリストにないものは alert等で警告する

のようにしたいのです。

ラジオボタンのように 「指定フォーム内の指定nameの個数分ループし、チェックがあるのをtrueとする」のような感じなのかと思い、

上記コードのoptionタグ内に name="key" を埋め込み、

JavaScript

1/* 2 リスト(候補)に指定キーワードがあるかどうか調べる。 3 あれば true, なければ false を返す。 4 5 keyword := この関数を呼び出す前に取得したデータ ( キーワード ) とする 6*/ 7function HasKey( keyword ){ 8 var flag; 9 10 flag = false; 11 12 for( i = 0; i < document.Asking.key.length; i++ ){ 13 if( document.Asking.key[i].value == keyword ){ 14 flag = true; 15 break; 16 } 17 } 18return flag; 19}

としました。

で、戻り値を受け取った側 ( 呼び出し側 ) は true/false をalert で 表示する
のですが、なぜか何も出てきません。

プログラム ( JavaScript )から 配列で 指定する方法もありますが、

外部jsファイルに記述するので、

できれば変更は HTMLだけに済ませたいのですが。

[環境等]
HTML: HTML5
言語: JavaScript

宜しくお願い致します。


文章を追加します。

私がやりたかったことは、

HTML5 で Combobox ( datalist を使ったもの ) と ボタンを用意して、

ComboBoxのようなもの ( 以下 Combo ) の Text部に入っているデータがリスト部に設定されているデータ群 にまったくヒットしなかったら
"リストにありません。入力しなおしてください。" というようなalertを表示し再入力を促す。
-1 以外 ( リストにあるデータ ) なら そのページに移動する...

といった感じです。

私がイメージしていたのは、

ボタンが押されたときに動く関数 ( 以下 ButtonProc )と

リスト部にあるデータかどうかを調べる関数 ( 以下 CheckListIndex )

とあって、

ボタンが押された -> ButtonProc が呼ばれる -> ButtonProc内で CheckListIndex が呼ばれ、選択されているインデックスを調べる -> 戻り値が
-1 のとき データが存在しない。それ以外なら 存在する。 -> 戻り値が -1 なら "リストにありません。入力しなおしてください。" と表示し、それ以外なら 指定のページに移動する。

といった感じです。

指定のページ...

たとえば、
HTML の タグに埋め込まれている id が Combo のリスト部 ( datalist ) に入っていて、

true のとき ( つまり -1 以外 ) 、ページアドレス + "#" + 入力値

という感じにしたいのです。

たとえば、

"選択肢A" が選ばれている場合は

"Object.html#選択肢A"

に移動...
みたいに。

宜しくお願い致します。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Lhankor_Mhy

2016/12/12 07:16

追記拝読。どちらの回答でも応用すればできると思うのですが、分からない部分はどこですか?

回答2

2

たとえばこんな感じでどうでしょうか?
(想定外のデータが入力されたときにどうしたいかによります)

HTML

1<script> 2window.onload=function(){ 3document.querySelector('[name="KeyWordEdit"]').addEventListener('change',function(e){ 4 var v=e.target.value; 5 var n=e.target.list.options; 6 var flg=false 7 for(var i=0;i<n.length;i++){ 8 if(n[i].value==v){ 9 flg=true; 10 break; 11 } 12 } 13 if(!flg){ 14 alert('no!'); 15 e.target.value=''; 16 } 17}); 18} 19</script> 20<form name="Asking"> 21<label id="TextBoxForKeyword"> 22キーワード:<input type="text" name="KeyWordEdit" list="KeywordsList"> 23</label> 24<datalist id="KeywordsList"> 25<option value="選択肢A"></option> 26<option value="選択肢B"></option> 27<option value="選択肢C"></option> 28<option value="選択肢D"></option> 29<option value="選択肢E"></option> 30</datalist> 31</form>

投稿2016/12/12 05:02

yambejp

総合スコア110847

Lhankor_Mhy, kei344👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

1

ベストアンサー

e.target[0].list.optionsでリストが取得できます。

javascript

1document.Asking.addEventListener('submit', e => 2 alert( 3 Array.prototype.map.call(e.target[0].list.options, elm => elm.value).indexOf(e.target[0].value) 4 ) 5)

https://jsfiddle.net/6kv4161L/

質問の追記を受けて追記

ああ、もしかして、event.targetが取得できないということでお悩みなんでしょうか?
document.getElementById('KeywordsList').optionsでリストが取得できますのでお試しください。

投稿2016/12/12 06:17

編集2016/12/12 07:28
Lhankor_Mhy

総合スコア33689

kei344👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.83%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

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

JavaScript

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

HTML

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