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

但现在我不想再使用一个选择了，而是用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

您可以使用<li>属性为每个data-元素指定值。然后，您可以将单击处理程序绑定到每个<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”）来标识所有这些元素。然后给每个元素一个第二类（在本例中为“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();
});

Demo on JSFiddle

上面的代码实际上使用了事件委托，将单个点击处理程序绑定到<ul>元素，但是当执行回调时，this引用了<a>元素。点击。

如果不明显，我这样做的原因是您可以向现有组添加更多组或更多元素，而无需更改JavaScript代码，如{{3}所示}。

如何使下拉列表表现为if / else目的的选择？

1 个答案: