從下拉菜單中選擇后無法顯示值

Question

我有一個輸入字段，用戶可以正常輸入。 在田野旁邊有一個箭頭

單擊該箭頭，將打開一個包含數據列表的下拉列表。

現在，當用戶單擊下拉列表中應在輸入字段中顯示的任何值時

用戶可以編輯該選定值，因為它將被視為普通輸入值。

我的問題是，當我從下拉列表中選擇值時，它像這樣

HTML代碼

<input type="text" value="" id="job" placeholder="Job title" class="form-control title"  name="job">
<button type="button" class="form-control btn btn-default toggle-dropdown pj-dropdown-menu pj-jobtitle" data-toggle="dropdown"  name="job_title" id="job_title">
    <input type="hidden" name="selected_value" data-bind="bs-drp-sel-value" value="">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
</button>

<ul class="dropdown-menu line pj-dropdown-menu" role="menu" >
 <li  class="line" >
    <a href="#">
       <span class="developer">Frontend Developer </span>
       <p class="years">12 yrs</p>
       <div class="san-francisco-calif">
          SanFrancisco california USA  
          <p class="hour"> $24/hour</p>
       </div>
    </a>
 </li>
 <li  class="line">
    <a href="#">
       <span class="developer">Backend Developer </span>
       <p class="years">12 yrs</p>
       <div class="san-francisco-calif">
          SanFrancisco california USA  
          <p class="hour"> $24/hour</p>
       </div>
    </a>
 </li>
 <li  class="line" >
    <a href="#">
       <span class="developer">Business Consultant </span>
       <p class="years">12 yrs</p>
       <div class="san-francisco-calif">
          SanFrancisco california USA  
          <p class="hour"> $24/hour</p>
       </div>
    </a>
 </li>
</ul>

腳本代碼

<script>
 $('.dropdown-menu a').on('click', function(){    
     $('.toggle-dropdown').html($(this).find('span').html() + '<span class="caret"></span>');    
 })
</script>

Answer 1

你能試試這個腳本嗎？

<script>
 $('.dropdown-menu a').on('click', function(){    
    $("#job").val($(this).find("span").text());    
 })
</script>

單擊標簽后，只需找到內部跨度的文本，並將其分配為ID為#job的文本框中的值即可。