Форум

alexmixaylov · #1 (**permalink**) 23.04.2014, 23:08

Есть несколько массивов, которые хранят в себе классы элементов

В зависимости от выбраного селекта нужно показать(show) элементы(label) c классами из массива

Зашел в тупик получил имя массива, но это уже не массив стал

(пременная затерлась) а просто строка
И как можно показать все label.классИЗмассива

<select id="vid-product">
<option selected="selected">Выберите</option>	
<option value="10"class="10">Первый набор</option>
<option value="11"class="11">Второй набор</option>
<option value="12"class="12">Третий</option>
</select>

<div class="label-hide">
<label class="lbl-275"><input value="275" type="checkbox" class="value-275"/>первый</label>
<label class="lbl-259"><input value="259" type="checkbox" class="value-259"/>второй</label> 
<label class="lbl-286"><input value="286" type="checkbox" class="value-286"/>третий</label> 
</div>

$(document).ready(function(){
     //создаем массивы категорий (наборов)
     var set10 = ["lbl-275", "lbl-259", "lbl-286"]; 
     var set11 = ["lbl-275", "lbl-259"]; 
     var set12 = ["lbl-259"]; 
            
      $('.label-hide label').hide();//скрываю элементы 
     
     	$('#vid-product').on('change', function() {
            var numberSet = $('#vid-product').val();
            var nameSet = ("set") + numberSet;
            Здесь лейблу с классом из нужного массива присвоить show 
	                });
     
     alert ( $.isArray ( nameSet ) ); // выведет на экран true
     
   })(jQuery);

http://jsfiddle.net/LcKbf/2/ там отлаживаю код

Vlasenko Fedor · #2 (**permalink**) 24.04.2014, 00:48

<head>
  <script>
    window.onload = showresult;

    function showresult() {
      var sel = document.getElementById("vid-product");
      var labels = document.querySelectorAll("div.label-hide label");
      var rez = {
        set10: ["lbl-275", "lbl-259", "lbl-286"],
        set11: ["lbl-275", "lbl-259"],
        set12: ["lbl-259"]
      }
      var hidelabels = function () {
          var len = labels.length;
          while (len--)
          labels[len].style.display = "none";
        };
      sel.onchange = function () {
        hidelabels();
        if (this.selectedIndex) {
          var arr = rez["set" + this.value];
          var rezlabel = document.querySelectorAll('.' + arr.join(', .'));
          var len = rezlabel.length;
          while (len--)
          rezlabel[len].style.display = "block";
        }
      };
      hidelabels();
    };
  </script>
</head>
<body>
  <select id="vid-product">
    <option selected="selected">Выберите</option>
    <option value="10" class="10">Первый набор</option>
    <option value="11" class="11">Второй набор</option>
    <option value="12" class="12">Третий</option>
  </select>
  <div class="label-hide">
    <label class="lbl-275">
      <input value="275" type="checkbox" class="value-275" />первый</label>
    <label class="lbl-259">
      <input value="259" type="checkbox" class="value-259" />второй</label>
    <label class="lbl-286">
      <input value="286" type="checkbox" class="value-286" />третий</label>
  </div>
</body>

не досмотрел массивы сразу.

рони · #3 (**permalink**) 24.04.2014, 00:58

alexmixaylov,

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
 <script>
 $(function () {
     var obj = { set10 : ["lbl-275", "lbl-259", "lbl-286"],
                set11 : ["lbl-275", "lbl-259"],
                set12 : ["lbl-259"]};

     $('.label-hide label').hide();

     $('#vid-product').on('change', function () {
         $('.label-hide label').hide();
         var numberSet = $('#vid-product').val();
         var nameSet = ("set") + numberSet;
         nameSet = '.' + obj[nameSet].join(', .')
         $(nameSet, ".label-hide").show();
     });
});
</script>
</head>
<body>
  <select id="vid-product">
    <option selected="selected">Выберите</option>
    <option value="10" class="10">Первый набор</option>
    <option value="11" class="11">Второй набор</option>
    <option value="12" class="12">Третий</option>
</select>
<div class="label-hide">
    <label class="lbl-275">
        <input value="275" type="checkbox" class="value-275" />первый</label>
    <label class="lbl-259">
        <input value="259" type="checkbox" class="value-259" />второй</label>
    <label class="lbl-286">
        <input value="286" type="checkbox" class="value-286" />третий</label>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript