显示下拉列表引导程序中的选定值答案

【问题标题】：show the selected value from dropdownlist bootstrap显示下拉列表引导程序中的选定值
【发布时间】：2017-03-08 01:52:02
【问题描述】：

我正在使用引导程序和 jQuery 设计一个表单，但我在尝试使用下拉列表按钮时遇到了困难，设计如下所示

代码是：

  <div class="form-group">
                            <div class="col-lg-6">
                                <div class="input-group">

                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default"
                                                tabindex="-1">
                                            Select Option
                                        </button>

                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" tabindex="-1">
                                            <span class="caret"></span>
                                            <span class="sr-only">Toggle Dropdown</span>
                                        </button>

                                        <ul class="dropdown-menu">
                                            <li><a href="#">Option I</a></li>
                                            <li><a href="#">Option II</a></li>
                                            <li><a href="#">Option III</a></li>

                                            <li class="divider"></li>
                                            <li><a href="#">Option IV</a></li>
                                        </ul>

                                    </div>
                                    <input type="text" class="form-control" id="textaux">

                                </div>
                            </div

我想要的是当用户选择一个值时，输入类型文本控件显示选择的值，为了实现这一点，我创建了这个脚本

$(document).ready(function () {      
    $(".dropdown-menu li a").click(function () {
        var selText = $(this).text();
        $(this).parents('.form-group').find('#textaux').html(selText + ' <span class="caret"></span>');
    });
});

但它没有显示任何值，请您帮助我并告诉我如何修改脚本以便在文本控件中显示所选值

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案1】：

但它没有显示任何值，请您帮助我并告诉我如何修改脚本以便在文本控件中显示所选值

而不是.parents()（获取当前匹配元素集中每个元素的祖先，可选地由选择器过滤。）您可以使用.closest()（对于集合中的每个元素，获取匹配的第一个元素选择器通过测试元素本身并遍历其在 DOM 树中的祖先。）而不是.html()，您必须使用.val() 来设置输入文本框的值。

此外，输入文本框不能包含 html 元素：

<span class="caret"></span>

sn-p：

$(document).ready(function () {
  $(".dropdown-menu li a").click(function () {
      var selText = $(this).text();
      $(this).closest('.form-group').find('#textaux').val(selText);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="form-group">
    <div class="col-lg-6">
        <div class="input-group">

            <div class="input-group-btn">
                <button type="button" class="btn btn-default"
                        tabindex="-1">
                    Select Option
                </button>

                <button type="button" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" tabindex="-1">
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Dropdown</span>
                </button>

                <ul class="dropdown-menu">
                    <li><a href="#">Option I</a></li>
                    <li><a href="#">Option II</a></li>
                    <li><a href="#">Option III</a></li>

                    <li class="divider"></li>
                    <li><a href="#">Option IV</a></li>
                </ul>

            </div>
            <input type="text" class="form-control" id="textaux">

        </div>
    </div>
</div>

【讨论】：