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

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

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

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

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

摘录：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: