HTML как сгруппировать опции в выборке без использования тега <optgroup> - PullRequest
Новая
       23

HTML как сгруппировать опции в выборке без использования тега <optgroup>

1 голос
/ 10 мая 2019

У меня есть выпадающий список со многими опциями, и их нужно сгруппировать, потому что я даю каждому <optgroup> класс и устанавливаю для них значение display:none, чтобы при выборе чего-либо в другом выпадающем списке выберите их стать видимым. Моя проблема в том, что я, похоже, должен использовать ярлык, и я действительно не хочу ярлык. Мой список опций будет очень длинным, поэтому вставка класса в каждую опцию будет проблемой, особенно если я использую Jquery для манипулирования ими. Как я могу сгруппировать их вместо этого? Я просто не могу найти решение нигде.

Пример HTML: 

<select>
<option>Select something</option>
<optgroup class="default" label="defaultLabelNotwanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
</optgroup>
<optgroup class="one" style="display:none" label="firstLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
</optgroup>
<optgroup class="two" style="display:none" label="secondLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option1</option>
    <option>Option6</option>
</optgroup>
<optgroup class="three" style="display:none" label="thirdLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
    <option>Option7</option>
</optgroup>
<optgroup class="four" style="display:none" label="fourthLabelNotWanted">
    <option>Option1</option>
    <option>Option2</option>
    <option>Option3</option>
    <option>Option4</option>
    <option>Option5</option>
    <option>Option6</option>
</optgroup>

Ответы [ 3 ]

0 голосов
/ 10 мая 2019

Единственными допустимыми тегами внутри <select> являются <option> и <optgroup> (https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element),, поэтому нет, нет другого способа сгруппировать ваши варианты, кроме использования optgroup.

Что вы можете сделать, это переместить класс из optgroup в его параметры, затем переместить все параметры непосредственно под select и, наконец, удалить optgroups. 

$(document).ready(function () {
    const select = $('select');
    select.find('option').each(function () {
        select.append($(this).addClass($(this).parent().attr('class')));
    });
    select.find('optgroup').remove();
});

затем вы можете скрыть опции, основанные на классе: 

select.find('.two').hide();

jsfiddle: https://jsfiddle.net/ux2m6bhw/1/

0 голосов
/ 10 мая 2019

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

<select>
    <option class="initialitem">Select something</option>
    <option class="zero">Option1</option>
    <option class="zero">Option2</option>
    <option class="zero">Option3</option>
    <option class="one">i Option1</option>
    <option class="one">i Option2</option>
    <option class="one">i Option3</option>
    <option class="one">i Option4</option>
    <option class="one">i Option5</option>
    <option class="one">i Option6</option>
    <option class="two">ii Option1</option>
    <option class="two">ii Option2</option>
    <option class="two">ii Option3</option>
    <option class="two">ii Option4</option>
    <option class="two">ii Option5</option>
    <option class="two">ii Option1</option>
    <option class="two">ii Option6</option>
    <option class="three">iii Option1</option>
    <option class="three">iii Option2</option>
    <option class="three">iii Option3</option>
    <option class="three">iii Option4</option>
    <option class="three">iii Option5</option>
    <option class="three">iii Option6</option>
    <option class="three">iii Option7</option>
    <option class="four">Option1</option>
    <option class="four">Option2</option>
    <option class="four">Option3</option>
    <option class="four">Option4</option>
    <option class="four">Option5</option>
    <option class="four">Option6</option>
</select>

Затем с помощью JQuery вы можете скрыть все параметры с помощью следующего оператора 

$('select').find('option').hide();

Затем, чтобы показать только один набор, выполните следующее 

$('select').find('.three').show();
$('select').find('.initialitem').show();

Выше просто отобразятся параметры, которые имеюткласс three

0 голосов
/ 10 мая 2019

Хотите скрыть только ярлык?Вы пробовали этот код? 

optgroup {
  visibility: hidden;
}
optgroup option {
  visibility: visible;
}
...