JavaScript 下拉函数重构答案

【问题标题】：JavaScript Dropdown Function RefactorJavaScript 下拉函数重构
【发布时间】：2016-08-20 00:30:26
【问题描述】：

大家好，我有 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 个函数的方法。

【问题讨论】：

标签： javascript html twitter-bootstrap drop-down-menu

【解决方案1】：

你可以这样做：

  $(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>

【讨论】：

【解决方案2】：

这段代码应该可以工作：

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

【讨论】：

有了这个，每当您从下拉列表中选择任何一个选项时，整个下拉列表都会填充所有下拉选项。
@Gothdo $(this) 在您的示例中指的是整个 ul，因此该按钮包含被点击的 ul 的所有列表项的文本。
我希望只用所选值填充它，而不是所有值。