引導程序一次獲取兩個dropdownlist的值

Question

我使用兩個引導程序下拉列表。我希望一次獲得兩個dropdownlist的價值。

我的HTML，

<div class="btn-group col-sm-5 col-xs-5 col-md-5 cgclry country" style="padding:3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#" style="border:0;">All Country<span class="caret"></span></a> 
    <ul class="dropdown-menu countries"> 
     <li><a href="#" data-id="USA" id="usa">USA</a></li> 
     <li><a href="#" data-id="Australia" id="aus">Australia</a></li> 
     <li ><a href="#" data-id="INDIA" id="ind">INDIA</a></li>       
    </ul> 
</div> 

<div class="btn-group col-sm-5 col-xs-5 col-md-5 " style="padding:3px 3px 3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#" style="border:none;">All Category<span class="caret"></span></a> 
    <ul class="dropdown-menu category"> 
     <li><a href="#" data-id="Tom Tailer" id="Tom Tailer">Tom Tailer</a></li> 
     <li><a href="#" data-id="Pepe Jeans" id="Pepe Jeans">Pepe Jeans</a></li> 
     <li><a href="#" data-id="Sinet Tech" id="Sinet Tech">Sinet Tech</a></li> 
     <li><a href="#" data-id="others" id="others"><span class="glyphicon glyphicon-star"></span> Other</a></li> 
    </ul> 
</div> 

我的jQuery，

$(document).on('click','.countries li a',function(){ 
    c=$(this).attr('data-id'); 
    alert(c); 
}); 

$(document).on('click','.category li a',function(){ 
    c=$(this).attr('data-id'); 
    alert(c); 
}); 

例如，我在國家下拉列表中單擊印度，然後單擊類別列表中湯姆零售商。我想要結果印度以及湯姆tailer。

Answer 1

我理解這個問題是問一個函數從代碼相同的任一列表中獲取值。

我實現（改進歡迎）： http://codepen.io/anon/pen/GpJvXx

$(document).ready(function() { 

    var getListAttributes = function (selector) { 
    listValue = selector.attr('data-value'); 
    alert(listValue); 
    } 

    $(document).on('click','.js-select a', function() { 
     getListAttributes($(this)); 
    }); 
}); 

Answer 2

我認爲這實施可能會更你在找什麼：

http://codepen.io/Aaron-AF/pen/qOdgBm

$(document).ready(function() { 
var listValues = []; 
    var setDropDownResults = function (selector) { 
    if(listValues.length < 1) { 
     $('.js-category').removeClass('hidden'); 
     $('.js-select-country').prop('disabled', true); 
    } else { 
     $('.js-select-category').prop('disabled', true); 
    } 
    listValues.push(" " + selector.val()); 
    $('.js-results').text("Results: " + listValues); 
    }; 
    var resetDropDown = function() { 
    listValues = []; 
    $('.js-category').addClass('hidden'); 
    $('.js-select-country, .js-select-category').prop('disabled', false); 
    $('.js-results').text(''); 
    }; 

    $('select').change(function() { 
     setDropDownResults($(this)); 
    }); 
    $('.js-reset').click(function() { 
    resetDropDown(); 
    }); 

}); 

它應該提供您，至少，有一個基地，可以讓你完成你想做的事情。

讓我知道你是否需要任何幫助。

Answer 3

試試這個：

DEMO

HTML：

<div class="btn-group col-sm-5 col-xs-5 col-md-5 cgclry country" style="padding:3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select2" data-toggle="dropdown" href="#" style="border:0;">All Country<span class="caret"></span></a> 
    <ul class="dropdown-menu countries"> 
     <li><a class="first" href="#" data-id="USA" id="usa">USA</a></li> 
     <li><a class="first" href="#" data-id="Australia" id="aus">Australia</a></li> 
     <li><a class="first" href="#" data-id="INDIA" id="ind">INDIA</a></li>       
    </ul> 
</div> 

<div class="btn-group col-sm-5 col-xs-5 col-md-5 " style="padding:3px 3px 3px 3px;"> 
    <a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown" href="#" style="border:none;">All Category<span class="caret"></span></a> 
    <ul class="dropdown-menu category"> 
     <li><a href="#" data-id="Tom Tailer" id="Tom Tailer">Tom Tailer</a></li> 
     <li><a href="#" data-id="Pepe Jeans" id="Pepe Jeans">Pepe Jeans</a></li> 
     <li><a href="#" data-id="Sinet Tech" id="Sinet Tech">Sinet Tech</a></li> 
     <li><a href="#" data-id="others" id="others"><span class="glyphicon glyphicon-star"></span> Other</a></li> 
    </ul> 
</div> 

JS：

$(document).on('click','.countries li a',function(){ 
    c=$(this).attr('data-id'); 
    $('.first').removeClass('active'); 
    $(this).addClass('active'); 
    alert(c); 
}); 

$(document).on('click','.category li a',function(){ 
    c=$(this).attr('data-id'); 
    b=$('.active').attr('data-id'); 
    alert(c +' '+ b); 

});