Скрыть пункт меню в select

184

15 августа 2017, 16:41

Нужно скрыть часть пунктов select.
То есть, чтобы при выборе "Цветная" скрылись пункты с value="2", а при выборе "Чёрно-белая" - value="1".
Что я делаю не так?

var card_paper = document.getElementById("card_paper"); 
 
card_paper.onchange = function() { 
  if (card_paper.options[card_paper.selectedIndex].value == '1') { 
    var sel = document.getElementById('card_color'); 
    sel.options[2].setAttribute('disabled', true); 
  } 
};

select option[disabled] { 
  display: none; 
}

<label for="card_paper">Выберите цветность</label> 
<select name="card_paper" id="card_paper" class="form-control"> 
  <option value="1">Цветная</option> 
  <option value="2">Чёрно-белая</option> 
</select> 
<br> 
<br> 
<label for="card_color">Выберите размер модуля</label> 
<select name="card_color" id="card_color" class="form-control"> 
  <!-- Цветная --> 
  <option price="878" image="2" value="1">Базовый (11 см2)</option> 
  <option price="1587" image="3" value="1">2Б (23 см2)</option> 
  <option price="2244" image="4" value="1">3Б (34 см2)</option> 
  <option price="2976" image="5" value="1">4Б (48 см2)</option> 
  <option price="4380" image="6" value="1">6Б (73 см2)</option> 
  <option price="5529" image="7" value="1">8Б (97 см2)</option> 
  <option price="6655" image="8" value="1">10Б (121 см2)</option> 
  <option price="7738" image="9" value="1">12Б (146 см2)</option> 
  <option price="9282" image="10" value="1">15Б (182 см2)</option> 
  <option price="9600" image="11" value="1">16Б (192 см2)</option> 
  <option price="10829" image="12" value="1">18Б (221 см2)</option> 
  <option price="11712" image="13" value="1">20Б (244 см2)</option> 
  <option price="12200" image="14" value="1">21Б (260 см2)</option> 
  <option price="13340" image="15" value="1">24Б (290 см2)</option> 
  <option price="15570" image="16" value="1">28Б (346 см2)</option> 
  <option price="16148" image="17" value="1">30Б (367 см2)</option> 
  <option price="19092" image="18" value="1">36Б (444 см2)</option> 
  <option price="22260" image="19" value="1">42Б (530 см2)</option> 
  <option price="41820" image="20" value="1">Первая полоса (1020 см2)</option> 
  <option price="42800" image="21" value="1">Целая полоса (1070 см2)</option> 
  <!-- Чёрно-белая --> 
  <option price="498" image="1" value="2">Минимальный (6,3 см2)</option> 
  <option price="781" image="2" value="2">Базовый (11 см2)</option> 
  <option price="1472" image="3" value="2">2Б (23 см2)</option> 
  <option price="2006" image="4" value="2">3Б (34 см2)</option> 
  <option price="2688" image="5" value="2">4Б (48 см2)</option> 
  <option price="3942" image="6" value="2">6Б (73 см2)</option> 
  <option price="5141" image="7" value="2">8Б (97 см2)</option> 
  <option price="6171" image="8" value="2">10Б (121 см2)</option> 
  <option price="7300" image="9" value="2">12Б (146 см2)</option> 
  <option price="8918" image="10" value="2">15Б (182 см2)</option> 
  <option price="9216" image="11" value="2">16Б (192 см2)</option> 
  <option price="10387" image="12" value="2">18Б (221 см2)</option> 
  <option price="11224" image="13" value="2">20Б (244 см2)</option> 
  <option price="11700" image="14" value="2">21Б (260 см2)</option> 
  <option price="12760" image="15" value="2">24Б (290 см2)</option> 
  <option price="14878" image="16" value="2">28Б (346 см2)</option> 
  <option price="15414" image="17" value="2">30Б (367 см2)</option> 
  <option price="18204" image="18" value="2">36Б (444 см2)</option> 
  <option price="21200" image="19" value="2">42Б (530 см2)</option> 
  <option price="39590" image="21" value="2">Целая полоса (1070 см2)</option> 
</select>

Answer 1

var card_paper = document.getElementById("card_paper"); 
var list = document.getElementById("card_color"); 
 
card_paper.addEventListener('change', toggleElements); 
 
function toggleElements(e) { 
  var target = e.target; 
  list.disabled = false; 
   
      for (var i = 0; i < list.length; i++) { 
        if (list.options[i].value === target.value) { 
          list.options[i].disabled = false; 
        }  
     
        if (list.options[i].value !== target.value) { 
          list.options[i].disabled = true; 
          if (list.options[i].selected) { 
            list.options[i].selected = false; 
          } 
        } 
 
      } 
   
      if (target.value === "-1") { 
        list.disabled = true; 
      } 
}

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width"> 
  <title>JS Bin</title> 
  <style> 
    select option:disabled { 
      display: none; 
    } 
  </style> 
</head> 
<body> 
<label for="card_paper">Выберите цветность</label> 
<select name="card_paper" id="card_paper" class="form-control"> 
  <option value="-1">...</option> 
  <option value="1">Цветная</option> 
  <option value="2">Чёрно-белая</option> 
</select> 
<br> 
<br> 
<label for="card_color">Выберите размер модуля</label> 
<select name="card_color" id="card_color" class="form-control" disabled> 
  <!-- Цветная --> 
  <option price="878" image="2" value="1">Базовый (11 см2)</option> 
  <option price="1587" image="3" value="1">2Б (23 см2)</option> 
  <option price="2244" image="4" value="1">3Б (34 см2)</option> 
  <option price="2976" image="5" value="1">4Б (48 см2)</option> 
  <option price="4380" image="6" value="1">6Б (73 см2)</option> 
  <option price="5529" image="7" value="1">8Б (97 см2)</option> 
  <option price="6655" image="8" value="1">10Б (121 см2)</option> 
  <option price="7738" image="9" value="1">12Б (146 см2)</option> 
  <option price="9282" image="10" value="1">15Б (182 см2)</option> 
  <option price="9600" image="11" value="1">16Б (192 см2)</option> 
  <option price="10829" image="12" value="1">18Б (221 см2)</option> 
  <option price="11712" image="13" value="1">20Б (244 см2)</option> 
  <option price="12200" image="14" value="1">21Б (260 см2)</option> 
  <option price="13340" image="15" value="1">24Б (290 см2)</option> 
  <option price="15570" image="16" value="1">28Б (346 см2)</option> 
  <option price="16148" image="17" value="1">30Б (367 см2)</option> 
  <option price="19092" image="18" value="1">36Б (444 см2)</option> 
  <option price="22260" image="19" value="1">42Б (530 см2)</option> 
  <option price="41820" image="20" value="1">Первая полоса (1020 см2)</option> 
  <option price="42800" image="21" value="1">Целая полоса (1070 см2)</option> 
  <!-- Чёрно-белая --> 
  <option price="498" image="1" value="2">Минимальный (6,3 см2)</option> 
  <option price="781" image="2" value="2">Базовый (11 см2)</option> 
  <option price="1472" image="3" value="2">2Б (23 см2)</option> 
  <option price="2006" image="4" value="2">3Б (34 см2)</option> 
  <option price="2688" image="5" value="2">4Б (48 см2)</option> 
  <option price="3942" image="6" value="2">6Б (73 см2)</option> 
  <option price="5141" image="7" value="2">8Б (97 см2)</option> 
  <option price="6171" image="8" value="2">10Б (121 см2)</option> 
  <option price="7300" image="9" value="2">12Б (146 см2)</option> 
  <option price="8918" image="10" value="2">15Б (182 см2)</option> 
  <option price="9216" image="11" value="2">16Б (192 см2)</option> 
  <option price="10387" image="12" value="2">18Б (221 см2)</option> 
  <option price="11224" image="13" value="2">20Б (244 см2)</option> 
  <option price="11700" image="14" value="2">21Б (260 см2)</option> 
  <option price="12760" image="15" value="2">24Б (290 см2)</option> 
  <option price="14878" image="16" value="2">28Б (346 см2)</option> 
  <option price="15414" image="17" value="2">30Б (367 см2)</option> 
  <option price="18204" image="18" value="2">36Б (444 см2)</option> 
  <option price="21200" image="19" value="2">42Б (530 см2)</option> 
  <option price="39590" image="21" value="2">Целая полоса (1070 см2)</option> 
</select> 
</body> 
</html>

Answer 2

Вот что получилось с использованием jquery, осталось только при инициализации черно-белые скрывать, но это сам разберешься.

Ссылка на jsfiddle - https://jsfiddle.net/r8jynb8w/3/

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};
var card_paper = $('#card_paper');
var card_color = $('#card_color');
card_paper.change(function(event){
    var type = $(event.target).val();
  $('#card_color option').each(function(id, option){
    option = $(option);
    if(option.attr('value')==type){
        option.toggleOption(true);
    }else{
        option.toggleOption(false);
    }
  })
});