Как заставить выпадающий список вести себя как выбор для целей if / else?

Question

Как заставить выпадающий список вести себя как выбор для целей if / else?

0

Я использую регулярный зависимый выбор, как в приведенном ниже коде:

HTML:

<select id="select_ciudad">
<option>Madrid</option>
<option>Barcelona</option>


<select id="select_act">
<option>A</option>  
<option>B</option>  


<select id="select_act2" style="display:none">
<option>1</option>
<option>2</option>

</select>

JS:

$( document ).ready(function() {    
 $("#select_ciudad").change(function() {
  if ($("#select_ciudad").val()=="Madrid") {
    $("#select_act").show();
    $("#select_act2").hide(); 
    }

else if ($("#select_ciudad").val()=="Barcelona") {
        $("#select_act2").show();
            $("#select_act").hide();
    };
});

Но теперь я больше не хочу использовать select, и я заменяю его неуправляемым списком css, делая что-то вроде:

Новый HTML:

<section class="main">
            <div class="wrapper">
                <div id="dd" class="wrapper-dropdown"          tabindex="1">
                    <span>Ciudad</span>
                    <ul class="dropdown">
                        <li><a href="#">Madrid</a></li>
                        <li><a href="#">Barcelona</a></li>
                    </ul>
                </div>
            </div>
        </section>

И теперь я не могу заставить JS работать таким же образом, чтобы что-то сделать, когда я нажимаю на любой из параметров (элементы списка). Кто-нибудь знает, как это сделать?

chancar 21 март 2014, в 20:02

Источник

1

Этот HTML не ваш официальный, не так ли? Закрывающие теги </select> отсутствуют.
DontVoteMeDown 21 март 2014, в 18:15
0

Google "выборочная коробка". Опять же, почему вы заменяете нативный элемент?
Mathletics 21 март 2014, в 18:26
0

Это не официальный (ошибка копирования / вставки). Я заменил собственный элемент, потому что я больше не хочу поле выбора, а что-то вроде полей from / to, например, на edreams.com
chancar 21 март 2014, в 18:40

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Этот HTML не ваш официальный, не так ли? Закрывающие теги </select> отсутствуют.
Google "выборочная коробка". Опять же, почему вы заменяете нативный элемент?
Это не официальный (ошибка копирования / вставки). Я заменил собственный элемент, потому что я больше не хочу поле выбора, а что-то вроде полей from / to, например, на edreams.com

John S · Accepted Answer · 2014-03-21T22-21-00.000Z

Вы можете назначать значения для каждого из элементов <li> с помощью data-. Затем вы можете привязать обработчик кликов к каждому элементу <a> и использовать значение из родительского элемента <li> в инструкции if-else.

Но я рекомендую избегать инструкции if-else с помощью классов CSS.

Сначала добавьте data- в элементы <li>. Эти значения представляют собой селектора, которые идентифицируют элементы, которые должны отображаться для этой опции.

<ul class="dropdown">
    <li data-selector=".group-madrid"><a href="#">Madrid</a></li>
    <li data-selector=".group-barcelona"><a href="#">Barcelona</a></li>
</ul>

Затем поместите классы CSS на элементы, которые вы хотите показать/скрыть. Используйте один класс (в данном случае "группу"), чтобы идентифицировать все такие элементы. Затем дайте каждому элементу второй класс (в данном случае либо "group-madrid", либо "group-barcelona"), чтобы привязать их к одному из пунктов выше.

<select id="select_act" class="group group-madrid">
    ...
</select>
<select id="select_act2" class="group group-barcelona">
    ...
</select>

Затем привяжите обработчик по клику к элементам <a>.

$(document).ready(function() {
    $('ul.dropdown').on('click', '>li>a', function(e) {
        e.preventDefault();
        $('.group').hide();
        $($(this).parent('li').attr('data-selector')).show();
    }).children('li:first').children('a:first').click();
});

Демо на JSFiddle

В приведенном выше коде фактически используется делегирование делегирования, привязка одного обработчика щелчка к элементу <ul>, но когда выполняется обратный вызов, this относится к элементу <a> который был нажат.

В случае, если это не очевидно, причина, по которой я делаю это, заключается в том, что вы можете добавить больше групп или более элементов в существующую группу, не изменяя вообще код JavaScript, как показано в этом jsfiddle.