顯示從下拉列表引導

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>