JavaScript下拉函数重构

嘿，伙计们，我有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>

主题

宝马
梅赛德斯
马自达
福特
拉达
奥迪
斯柯达
菲亚特

年

2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年

水平仪

奢侈
普通的

我有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>');

        });
    });

$（函数（）{
$（“#makein li”）。单击（函数（）{
$（“#make”）.html（$（this.text（）+”）；
});
});
$（函数（）{
$（“#yearin li”）。单击（函数（）{
$（“#year”）.html（$（this.text（）+”）；
});
}); 
$（函数（）{
$（“#levelin li”）。单击（函数（）{
$（“#level”）.html（$（this.text（）+”）；
});
});

我真的不喜欢有3个不同JavaScript函数的方法。我想知道你们是否知道制作这3个函数的方法。

这段代码应该可以：

$(function() {
  $('.dropdown-menu li').click(function() {
    $(this).closest('dropdown').find('button').html($(this).text()+' <span class="caret"></span>')
  })
})

$（函数（）{
$（'.下拉菜单li'）。单击（函数（）{
$（this）.closest（'dropdown'）.find（'button'）.html（$（this）.text（）+“”）
})
})

此代码应适用于：

$(function() {
  $('.dropdown-menu li').click(function() {
    $(this).closest('dropdown').find('button').html($(this).text()+' <span class="caret"></span>')
  })
})

$（函数（）{
$（'.下拉菜单li'）。单击（函数（）{
$（this）.closest（'dropdown'）.find（'button'）.html（$（this）.text（）+“”）
})
})

您可以这样做：

$（函数（）{
$（“li”）。单击（函数（）{
$（this.parent（）.sibbins（'button'）.first（）.html（$（this.text（）+“”）；
});
});

主题

宝马
梅赛德斯
马自达
福特
拉达
奥迪
斯柯达
菲亚特

年

2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年

水平仪

奢侈
普通的

您可以这样做：


$（函数（）{
$（“li”）。单击（函数（）{
$（this.parent（）.sibbins（'button'）.first（）.html（$（this.text（）+“”）；
});
});

主题

宝马
梅赛德斯
马自达
福特
拉达
奥迪
斯柯达
菲亚特

年

2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年

水平仪

奢侈
普通的

使用此按钮，每当您从下拉列表中选择任何一个选项时，整个下拉列表将填充所有下拉选项。@Gothdo$（此）在您的示例中指的是整个ul，因此按钮包含单击的ul的所有列表项的文本。我希望仅填充所选值，不是所有的值。使用这个值，每当您从下拉列表中选择任何一个选项时，整个下拉列表都会填充所有的下拉选项。@Gothdo$（此）在您的示例中，指的是整个ul，因此按钮包含单击的ul的所有列表项的文本。我的愿望是仅使用所选值填充它，而不是所有值。