从下拉列表中选择后无法显示值

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的文本框中指定。