multipleのセレクトボックスで「特定の項目」を含む場合にonchangeを発動したい

前提・実現したいこと

複数選択が可能なセレクトボックスにおいて、articlesを選択肢に含んだ場合にonchangeを発動するというjavascriptを描きたいです。

以下が実際のフォームのコードです。
今回はarticlesを選ぶとhidden1の設問が現れるようなonchangeを記載しているつもりなのですが、
if(value.includes('articles'))としたところ、articlesを単体で選ぶとhidden1が現れるものの
articlesを選びながら他の選択肢を追加すると、hidden1が消えてしまいます。

こいった場合、includeでは想定の動きができないのでしょうか。
articlesを含む複数選択をした際もhidden1が現れるような記載方法について、
見当のつく方がいらっしゃればアドバイスいただけないでしょうか。
よろしくお願いいたします。

<%= semantic_form_for [:admin, @ad] do |f| %>
  <%= f.inputs do %>
    <li>
      <% @ad_places = AdPlace.all %>
      <label class="label">ad_place</label>
      <select class="chosen-select" name="ad[ad_place]" id="ad_ad_place">
        <option value="">選択してください</option>
        <% @ad_places.each do|place| %>
          <option value=<%= place.name %>><%=place.name %></option> 
        <% end %>        
      </select>  
    </li>  
    <li> 
      <label class="label">menu</label> 
      <select multiple="multiple" name="ad[menu][]" id="ad_menu" onchange="menufunc()">    
        <option value="">選択してください</option>   
      </select>
    </li>   
    <li id="hidden1">
      <% @tags = Tag.all %>
        <label class="label">article_tag_no</label>
        <ol class="checkboxes">
          <% @tags.each do|tag| %>
            <%= f.check_box :article_tag_no, {multiple: true}, tag.no, nil %>&ensp;
            <%= tag.name %>&nbsp;&nbsp;
          <% end %>
        </ol>
    </li>       
  
  <% end %>
  <%= f.actions %>
<% end %>    

<script>
  document.getElementById("hidden1").style.display ="none";
  function menufunc(value) {
    var value　= document.getElementById("ad_menu").value;
    var hidden1 = document.getElementById("hidden1");
    if(value.includes('articles')){
      hidden1.style.display ="block";
       }
    else{
      hidden1.style.display ="none";
    }
}
</script>


<script>
window.onload = function() {
  // 掲載場所の選択肢
  menu = document.getElementById("ad_menu");
  // メニューの選択肢が変更された際の動作
  place = document.getElementById("ad_ad_place");
  place.onchange = changePlace;
}

// 掲載場所の選択肢が変更された際の動作
function changePlace() {
  // 変更後の掲載場所を取得
  var changePlace = place.value;
  if (changePlace == "side_bar") {
    // sidebarが設定された場合
    setSideBar();
  } 
}

// sidebarに広告を掲載するメニューの選択肢を設定する
function setSideBar() {
  // メニューの選択肢を空にする
  menu.textContent = null;
  // メニューの選択肢
  var SideBar = [
    {cd:"", label:"選択して下さい"},
    {cd:"home", label:"home"},
    {cd:"nursery_search", label:"nursery_search"},  
    {cd:"taiki_infos", label:"taiki_infos"},  
    {cd:"fee_infos", label:"fee_infos"},      
    {cd:"articles", label:"articles"},     
  ];

  SideBar.forEach(function(value) {
    var op = document.createElement("option");
    op.value = value.cd;
    op.text = value.label;
    menu.appendChild(op);
  });
}
</script>

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

回答1件

ベストアンサー

複数の場合valueでは採れないので、selectedOptionsから拾いましょう。
（selectedOptionsはHTMLCollectionを返すため、Array.from()で配列に変換している）

JavaScript
1document.getElementById( 'menu' ).addEventListener( 'change', function( e ) {
2  var sel = Array.from( document.getElementById("menu").selectedOptions ).map( elem => elem.value );
3  if ( sel.includes( 'articles' ) ) {
4    console.log( 'includes!' );
5  } else {
6    console.log( 'not-in' );
7  }
8}, false );
9// IE非対応
10```**動くサンプル：**[https://jsfiddle.net/kpzxfg81/1/](https://jsfiddle.net/kpzxfg81/1/)
11
12---
13
14【Array.from() - JavaScript | MDN】
15[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)
16
17【Array.prototype.map() - JavaScript | MDN】
18[https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
19
20【HTMLSelectElement.selectedOptions - Web APIs | MDN】
21[https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions)