Блог

Главная - Вопросы по программированию - Могу ли я улучшить этот метод отображения divs на основе выбранной опции? (выбор тега и отображение div)

Могу ли я улучшить этот метод отображения divs на основе выбранной опции? (выбор тега и отображение div)

#javascript #html

#javascript #HTML

Вопрос:

Я разработал код, целью которого является отображение некоторого конкретного div на основе выбранной опции выпадающего списка. Я использую массив, потому что я буду получать данные из базы данных (способ заполнения массива является предварительным).

Важно = код предназначен для работы в качестве средства поиска раздела на веб-странице под названием «каталог». Веб-страница посвящена здоровью, и в этом разделе вы можете получить контактную информацию врачей и специалистов, в таком порядке, что мне нужно, это отфильтровать медицинскую специальность.

Мой вопрос в том, могу ли я упростить этот код? что я должен добавить / удалить для того, чтобы?

 var options = [{
    "text": "Option 0",
    "value": "0",
    "selected": true
  },
  {
    "text": "Option 1",
    "value": "1"
  },
  {
    "text": "Option 2",
    "value": "2"

  },
  {
    "text": "Option 3",
    "value": "3"
  }
];

var selectBox = document.getElementById('kamal');

for (var i = 0, l = options.length; i < l; i  ) {
  var option = options[i];
  selectBox.options.add(new Option(option.text, option.value, option.selected));
}




function check() {
  var element = document.getElementById("kamal");
  var selectedValue = element.options[element.selectedIndex].value;
  var a = selectedValue;
  console.log(selectedValue);

  //  loop validation
  const numbers = [1, 2, 3, 4];
  var b;

  numbers.forEach(function(number) {
    if (b != a) {
      b = number;
      console.log(b);
      document.getElementById(b).style.display = "none";
    }
  });



  if (selectedValue != "") {
    document.getElementById(a).style.display = "block";
  } else {
    document.getElementById(a).style.display = "none";
  }



}  
 <select id="kamal" onchange="check()">

</select>
<br><br>
<div id="1" style="display: none">


  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi1</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block;">hi1</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi1</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi1</div>

</div>
<br>
<div id="2" style="display: none">
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block;">hi2</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block;">hi2</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi2</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi2</div>
</div>
<br>
<div id="3" style="display: none">
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi3</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block;">hi3</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi3</div>
  <div style="background-color: green; width: 200px; height: 300px; position: relative; display: inline-block; ">hi3</div>
</div>

Ответ №1:

да, проще..
во-первых: используйте CSS => не смешивайте код css в основной части html,
во-вторых: не смешивайте код js внутри основной части html,
в-третьих: ES6 меньше кодирования и более понятен

   const
    options = [
        { "text": "Option 0", "value": "" ,      "selected" : true  }
      , { "text": "Option 1", "value": "blk-1" , "selected" : false }
      , { "text": "Option 2", "value": "blk-2" , "selected" : false }
      , { "text": "Option 3", "value": "blk-3" , "selected" : false }
      ]
    , selectBox = document.getElementById('kamal');

    options.forEach((opt, i)=>
    {
      selectBox[i] = new Option(opt.text, i , opt.selected);
    })

    selectBox.onchange = function()
    {
      let Limit = parseInt( selectBox.value )
      options.forEach((opt, i)=>{
        if ( opt.value != '')
        {
          document.getElementById( opt.value ).className = ( i <= Limit) ? '' : 'cHide';
        }
      })
    }  
 div.cHide {
  display : none;
}
div#blk-1 > div ,
div#blk-2 > div ,
div#blk-3 > div {
  background-color: green;
  width: 100px;
  height: 50px;
  position: relative;
  display: inline-block;
}  
 <select id="kamal"></select>
<br><br>
<div id="blk-1" class="cHide">
  <div>hi1</div>
  <div>hi1</div>
  <div>hi1</div>
  <div>hi1</div>
</div>
<br>
<div id="blk-2" class="cHide">
  <div>hi2</div>
  <div>hi2</div>
  <div>hi2</div>
  <div>hi2</div>
</div>
<br>
<div id="blk-3" class="cHide">
  <div>hi3</div>
  <div>hi3</div>
  <div>hi3</div>
  <div>hi3</div>
</div>
<br>