Вопрос:

Как лучший и быстрый способ скрыть ненужную опцию с JavaScript

javascript jquery html

160 просмотра

4 ответа

288 Репутация автора

У меня есть выбор HTML с несколькими вариантами, и я хочу скрыть и показать, когда это необходимо, например, мой HTML:

<select>
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3">D</option>
<option value="4">E</option>
<option value="5">F</option>
<option value="6">G</option>
<option value="7">H</option>
</select>

Теперь я просто хочу показать опцию E и скрыть другую опцию. Но в другом случае, может быть, я хочу показать все. Я знаю, что в JavaScript мы можем скрыть один параметр по значению. Но я хочу знать, являются ли они лучшим способом скрыть и показать это в соответствии с производительностью (с Javascript )?

Спасибо.

Автор: Mr. Mike Источник Размещён: 24.03.2017 04:37

Ответы (4)


3 плюса

1181 Репутация автора

Решение

У вас есть скрытый атрибут для этого

var myselectoptions=document.getElementById("myselect").options;

function hideoptions(optionObject,optiontohide){
  for (index = 0; index < optiontohide.length; ++index) {
    optionObject[optiontohide[index]].setAttribute('hidden','true');
  }
}

function showoptions(optionObject,optiontoshow){
  for (index = 0; index < optiontoshow.length; ++index) {
    optionObject[optiontoshow[index]].removeAttribute("hidden");
  }
}

hideoptions(myselectoptions, [6,7,8]);      // hide F,G,H
showoptions(myselectoptions, [8]);         // show H
<select id="myselect">
  <option value="0" >Select</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
  <option value="4">D</option>
  <option value="5">E</option>
  <option value="6">F</option>
  <option value="7">G</option>
  <option value="8">H</option>
</select>

Для поддержки IE <11 добавьте эту строку в css: [hidden] {display: none; }

Также можно использовать Jquery, но я думаю, что простой код Javascript будет быстрее, поскольку Jquery выполняет много проверок для функции.

Автор: Gaurav Chaudhary Размещён: 24.03.2017 04:42

0 плюса

5173 Репутация автора

Вы можете скрыть с помощью .hide()функции

jQuery('select').children('option[value="4"]').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
  <option value="4">E</option>
  <option value="5">F</option>
  <option value="6">G</option>
  <option value="7">H</option>
</select>

Автор: Mukesh Ram Размещён: 24.03.2017 04:58

0 плюса

837 Репутация автора

Вы можете попробовать, как это работает нормально:

 $('#btnE').click(function () {
        $("#select option").show();
        $("#select option[value!=4]").hide();
    });

    $('#btnB').click(function () {
        $("#select option").show();
        $("#select option[value!=1]").hide();
    });

    $('#btnAll').click(function () {
        $("#select option").show();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select">
    <option value="">Select</option>
    <option value="0">A</option>
    <option value="1">B</option>
    <option value="2">C</option>
    <option value="3">D</option>
    <option value="4">E</option>
    <option value="5">F</option>
    <option value="6">G</option>
    <option value="7">H</option>
</select>
<br /><br />

<input type="button" value="Show Only E" id="btnE" />
<input type="button" value="Show Only B" id="btnB" />
<input type="button" value="Show All" id="btnAll" />

Автор: RAJNIK PATEL Размещён: 24.03.2017 05:03

0 плюса

375 Репутация автора

//for hiding only single option from the select
$('select').children('option[value="1"]').hide();

//for showing only one option from the select
$('select').children('option').hide(); 

$('select').children('option[value="1"]').show();

Будьте более точны в выборе элемента, так как это будет работать со всем списком выбора и может вызывать ошибки, поэтому используйте $ ("select: class") и т. Д ...

Автор: RITESH ARORA Размещён: 24.03.2017 05:19
Вопросы из категории :
32x32