optionタグにイベントをつけたい

Question

セレクトボックスの中の特定のoptionタグにイベントをつけたいです。

具体的にはいくつかあるoptionタグのうちの一つを選択したら、.hideで隠していた要素を.showにしたい。
.hideや.showは使わなくても構いませんが、隠していた要素を出すというイベントをoptionにつけたいと思っています。

html
<div class="select_box">
 <select id="cate" class="is-empty parent">
   <option value="add" id="add>追加する</option>
   <option value="cate01">オプション１</option>
   <option value="cate02">オプション２</option>
 </select>
</div>

<div class="hide">
 最初は隠れていて<option value="add">追加する</option>を選択したら表示にしたい
</div>

<script>
$('.hide').hide();
 $('#add').click(function(){
  $('.hide').show;
});
</script>

optionタグで指定すると動きません。
1つのoptonタグにイベントをつけることはどうしてもできないのでしょうか？

よろしくお願いします。

Answer 1

changeイベントを使えばいいのですが、それだと同じオプションを続けて選択した場合２度目は発火しません。（changeしていないので）。

この質問の場合はshow()するだけなので連続して発火させる意味は無いですが、それもできるようにするために、毎回インデックスを強制的に0に戻すサンプルを書いておきます。

<div class="select_box">
 <select id="cate" class="is-empty parent">
   <option value="">メニュー</option>
   <option value="add">追加する</option>
   <option value="cate01">オプション１</option>
   <option value="cate02">オプション２</option>
 </select>
</div>

<div class="hide">
 最初は隠れていて<option value="add">追加する</option>を選択したら表示にしたい
</div>
                            
<script>
$('.hide').hide();
$('#cate').change(function(){
   if ($('#cate').val() === 'add') {
     $('.hide').show();
   }
   $('#cate').prop("selectedIndex", 0);
});
</script>

Comments

[yc-www10]

ありがとうございます！
連続して発火するようにまで気を回していただいてありがとうございます！

Answer 2

<select multiple> や <select size=2以上> のようにページ上に<option>が表示されるのではない場合、<option>はただのデータであるのでイベントは発生しません。

ご希望の動作にするには、<select>のchangeイベントを使います。

Comments

[yc-www10]

<select>にイベントをつける必要があったのですね！
ご回答いただきありがとうございます！

Answer 3

add以外が選ばれたときに再度消す必要はないのでしょうか・・・

<script>
$(function(){
  $('.hide').hide();
  $('#cate').on('change',function(){
    if($(this).val()==$('#add').val()) $('.hide').show();
  });
});
</script>

<div class="select_box">
 <select id="cate" class="is-empty parent">
   <option value="">---</option>
   <option value="add" id="add">追加する</option>
   <option value="cate01">オプション１</option>
   <option value="cate02">オプション２</option>
 </select>
</div>

<div class="hide">
 最初は隠れていて「追加する」を選択したら表示にしたい
</div>

Comments

[yc-www10]

確かにそうですね。add以外が選ばれたときまでも必要でした！
ご回答いただきありがとうございました！

Answer 4

こんなんでどうでしょう
現在.hideてなっているclass名を変えたいところですね。

$("select#cate").on("change", function () {
  if ($('select option[value="add"]').prop("selected")) {
    $(".hide").show();
  } else {
    $(".hide").hide();
  }
});

Comments

[recal]

あ、他の方の回答みてませんでした。

[yc-www10]

希望通りの動きになりました！
ありがとうございます！