如何使下拉列表作為if / else目的的選擇？

Question

我正在使用常規的依存選擇，如以下代碼所示：

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工作。 有人知道怎么做嗎？

Answer 1

您可以使用data-屬性為每個<li>元素分配值。 然后，您可以將單擊處理程序綁定到每個<a>元素，並在if-else語句中使用父<li>元素中的值。

但是我建議通過使用CSS類避免if-else語句。

首先將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所示。