javascript - JQuery 从引导下拉菜单中获取值

Question

以下是我的 html 代码，它来自 Handlebars

<div class="form-group" id="lab-domain-body">
  <label or="scheduleConfigurationFieldDropdown">Select Configuration</label>
  <div class="dropdown  form-control--transparent">
    <input type="TextBox" value id="configuration" class="schedule-configuration sr-only" readonly required/>
    <button class="btn btn__dropdown dropdown-toggle" type="button" id="scheduleConfigurationFieldDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="test1">v1.3</button>
    <ul class="dropdown-menu modal-body__schedule-ul" id="demolist" aria-labelledby="scheduleConfigurationFieldDropdown">
      <li><span> v1.3</span></li>
      <li><span>MDSO</span></li>
      <li><span>v1.6</span></li>
      <li><span>v11.8</span></li>
    </ul>
  </div>
</div>

我希望用户选择项目后只需从下拉菜单中获取值。 以下是我到目前为止尝试过的 Jquery，尝试了所有方法，但在我的情况下似乎没有任何效果。

1. //This function is never get called  
   
   $('#demolist li a').on('click', function(){
       $('#configuration').val($(this).text());
   });
   

2. 我尝试启用提交按钮，工作正常。但仍然无法从下拉菜单中获取值。我认为这应该不够难，但卡住了。尝试了stackoverflow上的所有方法。

   $form.on('change input', 'input', enableSubmit);
   
     function enableSubmit(xyz) {
      console.log(($('.schedule-configuration')).val());
      var bc = $('#configuration').val($(this).text());
       var xyz = ($('.schedule-configuration')).text();
       console.log(xyz[0]);
   
     // Jquery to get value from selected 
     $formSubmit.prop('disabled', false);
   }
   

Answer 1

工作代码:

$(document).on('click', '#demolist li', function() {
  $('#configuration').val($(this).children('span').text());
});

这里有一个 fiddle :https://jsfiddle.net/beekvang/xj5oponw/