jquery - 显示从下拉列表 Bootstrap 中选择的值

Question

我正在使用 bootstrap 和 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>');
    });
});

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

Answer 1

but it doesnt show any value, could you please help me and tell me how to modify the script in order to show in the text control the value selected

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

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

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

代码片段:

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