selectで要素を表示、非表示したい

Question

<select name="name1">
<option value="" selected>選択してください</option>
<option value="あああああ">あああああ</option>
<option value="いいいいい">いいいいい</option>
<option value="ううううう">ううううう</option>
<option value="えええええ">えええええ</option>
</select>

<div class="box">
「あああああ」、「いいいいい」を選択した場合のみ表示
</div>

.boxはデフォルトで非表示、selectで「あああああ」、「いいいいい」を選択した場合のみ表示させたく下記で一応できたのですが、もう少し省略した記述方法がわかりません。

$(function(){
    $('[name=name1]').change(function() {
      var v = $('[name=name1]').val();
      if (v == 'あああああ') {
        $('.box').css('display', 'block');
      } else if (v == 'いいいいい') {
        $('.box').css('display', 'block');
      } else {
        $('.box').css('display', 'none');
      }
    });
  });

ご存じの方、ご教授ねがいます。

Answer 1

jQueryらしく書けばこう

$(function(){
  $('[name="name1"]').on('change',function(){
    $('.box').toggle($.inArray($(this).val(),["あああああ","いいいいい"])>=0);
  }).trigger('change');
});

Comments

[buk]

ご回答ありがとうございました。うまく表示されました。

Answer 2

まずは、CSSで非表示にしておいて、

.box {
  display: none;
}

$(function(){
  $('[name=name1]').change(function() {
    var v = $(this).val();
    if (v == 'あああああ' || v == 'いいいいい') {
      $('.box').show();
    } else {
      $('.box').hide();
    }
  });
});

三項演算子を使うともっと短く記述できるけど、この辺は好みで。

$(function(){
  $('[name=name1]').change(function() {
    var v = $(this).val();
    (v == 'あああああ' || v == 'いいいいい') ? $('.box').show() : $('.box').hide();
  });
});

Comments

[buk]

ご回答ありがとうございました。うまく表示されました。