Добавить действие в выпадающий список зависит от выбранных элементов

Question

Добавить действие в выпадающий список зависит от выбранных элементов

0

У меня следующий выпадающий список:

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 Seleccionar <span class="caret"></span>
</button>

<ul class="dropdown-menu" role="menu" >
    <li><a href="#" id="domicilio" data-value="acasa-viajar">A domicilio / En mi lugar</a></li>
    <li><a href="#" id="domicilio1" data-value="viajar">Sólo a domicilio</a></li>
    <li><a href="#" id="noDomicilio" data-value="acasa">Sólo en mi lugar</a></li>
</ul>

И мне это нужно, когда я выбираю Option A domicilio/En mi lugar или Sólo domicilio, он выполняет это действие:

$("#provincias").removeClass('collapse');

Я решил это, но я уверен, что этот код не очень хорошо.

$('#domicilio').click(function(e) {
    $("#provincias").removeClass('collapse');
    e.preventDefault();// prevent the default anchor functionality
});

$('#domicilio1').click(function(e) {
    $("#provincias").removeClass('collapse');
    e.preventDefault();// prevent the default anchor functionality
});

$('#noDomicilio').click(function(e) {
    $("#provincias").addClass('collapse');
    e.preventDefault();// prevent the default anchor functionality
});

спасибо

user3533040 14 апр. 2014, в 20:10

Источник

2

добавьте отсутствующие теги (это вопрос jQuery, верно?) и укажите более точно, что вы спрашиваете. Ах ... и добро пожаловать на ТАК!
luksch 14 апр. 2014, в 17:48

Теги:

javascript

jquery

html

drop-down-menu

3 ответа

Ещё вопросы

добавьте отсутствующие теги (это вопрос jQuery, верно?) и укажите более точно, что вы спрашиваете. Ах ... и добро пожаловать на ТАК!

Michael · Answer 1 · 2014-04-14T16-49-00.000Z

Что-то вроде следующего должно работать, чтобы инкапсулировать его в одну функцию (вы также можете добавить идентификатор в оператор select, если у вас более одного с данным классом):

$('.dropdown-menu li a').on('click',function(){
    switch($(this).attr('id')){
        case 'domicilio':
            //execute your code;
            $('#provincias').removeClass('collapse');
            break;
        case 'domicilio1':
            //execute your code;
            $('#provincias').removeClass('collapse');
            break;
        case 'noDomicilio':
            //execute your code;
            $('#provincias').addClass('collapse');
            break;
    }
    e.preventDefaults();
});

Отредактировано с учетом UL не SELECT

Это ul, нет select-тега. Я думаю, это не сработает. РЕДАКТИРОВАТЬ: Но я бы предпочел ваше решение.

Manwal · Answer 2 · 2014-04-14T15-20-00.000Z

Нет необходимости добавлять/удалять класс и не нужно менять свой HTML-код.

$('.dropdown-menu li a').on('click', function(e) {
    if ( $(this).attr('id') == 'noDomicilio' )
        $('#provincias').addClass('collapse');
    else 
        $('#provincias').removeClass('collapse');

    e.preventDefault();
});

DEMO

TheFrozenOne · Answer 3 · 2014-04-14T15-19-00.000Z

Добавьте класс в теги.

$('.foo').on('click', function(e) {
    if ( $(this).attr('id') == 'noDomicilio' )
        $('#provincias').addClass('collapse');
    else 
        $('#provincias').removeClass('collapse');

    e.preventDefault();
});