嘿,大家好,我有 3 个下拉菜单,每个下拉菜单都有自己的 id
,我这样做是因为我将下拉菜单的值设置为我选择的值,并且我想区分它们。
我的下拉菜单的 html 是:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="makein">
<li>bmw</li>
<li>mercedes</li>
<li>mazda</li>
<li>ford</li>
<li>lada</li>
<li>audi</li>
<li>skoda</li>
<li>fiat</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="yearin">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="levelin">
<li>luxury</li>
<li>ordinary</li>
</ul>
</div>
我有 3 个 JavaScript 函数来根据每个部分的 ID 设置下拉列表的值,如下所示:
$(function () {
$("#makein li").click(function(){
$("#make").html($(this).text()+' <span class="caret"></span>');
});
});
$(function () {
$("#yearin li").click(function(){
$("#year").html($(this).text()+' <span class="caret"></span>');
});
});
$(function () {
$("#levelin li").click(function(){
$("#level").html($(this).text()+' <span class="caret"></span>');
});
});
我真的不喜欢这种拥有 3 个不同 JavaScript 函数的方法。我想知道你们是否知道制作这 3 个函数的方法。
最佳答案
你可以这样做:
$(function() {
$("li").click(function() {
$(this).parent().siblings('button').first().html($(this).text() + ' <span class="caret"></span>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="make" type="button" data-toggle="dropdown"> Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="makein">
<li>bmw</li>
<li>mercedes</li>
<li>mazda</li>
<li>ford</li>
<li>lada</li>
<li>audi</li>
<li>skoda</li>
<li>fiat</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="year" type="button" data-toggle="dropdown"> Year
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="yearin">
<li>2016</li>
<li>2015</li>
<li>2014</li>
<li>2013</li>
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="level" type="button" data-toggle="dropdown"> Level
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="levelin">
<li>luxury</li>
<li>ordinary</li>
</ul>
</div>
关于JavaScript 下拉函数重构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39049359/