Question

我有下一个下拉列表：

<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óloadomicilio时，我需要执行此操作：

$("#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
});

谢谢

Answer 1

以下内容应该可以将它封装在一个函数中（如果你有多个给定的类，你可能还想在select语句中添加一个ID）：

$('.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

Answer 2

在a-tags中添加一个类。

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

    e.preventDefault();
});

Answer 3

无需添加/删除类，无需更改 HTML

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

    e.preventDefault();
});

DEMO

添加操作到下拉列表取决于所选项目

3 个答案: