显示从下拉列表引导

Question

I'm使用引导和jQuery设计形式，但我stucked试图用一个下拉列表按钮的选择值时，德兴是展示低于

而且代码：

<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()（对于集合中的每个元素，通过测试elem来获取匹配选择器的第一个元素在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>