指定したidのセレクトメニューのセレクタ。

前提・実現したいこと

「指定したidのセレクトメニューで選択されたものが空だったら」という条件分岐をするためには、
どのようなセレクタを指定すればよいのでしょうか？

ご教示をお願い致します。

該当のソースコード

HTML
1<select name="" class="title">
2  <option value="">Select</option>
3  <option value="MR">Mr.</option>
4  <option value="MRS">Mrs.</option>
5</select>
6
7<button id="btn">Continue</button>

試したこと

「セレクトメニューで」という条件をつけない方法ならばわかりました。

現状のコードは、id=btnのボタンをクリックしたときに、
【「classがtitleで選択されているもの」が、空だったら】というif文になっているかと思いますが、
これを
【「classがtitleのセレクトメニューで、選択されているもの」が、空だったら】というif文を作成したいです。
現状のコードでも動いていますが、
セレクタでの指定条件をより詳しく(「セレクトメニュー」という条件を追加して)書きたいです。

jQuery
1$("#btn").on("click", function(){
2	if($(".title option:selected").val() == ""){
3		alert("選択されていません。");
4	}
5});

m.ts10806

2019/02/18 07:46

イベントの発火条件は何でしょうか。

tkshp

2019/02/18 07:48

ボタンクリック時にチェックします。 $("#btn").on("click", function(){ ～ });

m.ts10806

2019/02/18 07:49

そちらも含めて、HTML、JavaScriptコード追記していただけたらと。 $("#title").val() だけでも「現在選択しているoptionのvalue」は取得可能ですが、それでは何が不足しているのかも追記してください。

tkshp

2019/02/18 07:54

ご指摘ありがとうございます。現状のコードでも取得できていますが、「セレクトメニューで指定したidで、選択したもので」という指定の方法を知りたいです。

m.ts10806

2019/02/18 07:56

> 「セレクトメニューで指定したidで、選択したもので」もう少し具体的に記載願えますか？「○○というデータを選択したときに××というデータを取得したい」みたいな形で例示してもらえるとイメージもわきます（今のところ実装イメージが全くわかないので）

m.ts10806

2019/02/18 08:04

分かったような分からないような。ですが、IDはそもそも画面内1つが原則ですから「idがtitleの」の時点で要素も確定してますよ。つじつま合わせるなら「セレクトメニューの中でIDがselectであれば」でしょうか。

tkshp

2019/02/18 08:07

失礼しました。確かにIDで一意になりますね。質問を書き直します。

行動規範の内容に同意します

回答2件

ベストアンサー

「classがtitleのセレクトメニューで、選択されているもの」が、空だったら

素直にかけばセレクタにselectを指定するだけ

javascript
1<script>
2$(function(){
3  $('#btn').on('click',function(){
4    if($('select.title').val()===""){
5      console.log('selectがselectされていない');
6    };
7  });
8});
9</script>
10<select name="" class="title">
11  <option value="">Select</option>
12  <option value="MR">Mr.</option>
13  <option value="MRS">Mrs.</option>
14</select>
15
16<button id="btn">Continue</button>

投稿2019/02/18 09:40

yambejp

総合スコア114775

tkshp

2019/02/19 04:53 編集

ご回答ありがとうございます。なるほど、 if($('select.title').val()===""){ と書けるのですね。とてもシンプルな書き方のご教示ありがとうございます。勉強になりました。ありがとうございました。

行動規範の内容に同意します

こういうことでしょうか・・・

html
1<select class="title">
2    <option value="">select</option>
3    <option value="1">2</option>
4    <option value="2">3</option>
5    <option value="3">4</option>
6</select>
7<p class="title"></p>
8<div class="title">aa</div>
9<button type="button" id="check">check</button>

js
1$(function(){
2    $("#check").on("click",function(){
3        $(".title").each(function(i,e){
4            if($(e).prop("tagName") == "SELECT" && $(e).val() == ""){
5                alert("test");
6            }
7        });
8    });
9});
10