JQuery从bootstrap下拉菜单中获取价值

Question

Following is my html code which came through 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> 

I want as soon user selects item just need to get value from dropdown menu. Following is a Jquery which i tried till now, tried everything but nothing seems to work in my case.

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

2. I tried enable submit button which is working fine. But still not able to get value from dropdown menu. I didn't think it should be hard enough but stuck. Tried every method on stackoverflows.

    $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

You're attaching the click event handler to $('#demolist li a') , but there's no <a> element in your <ul> . Try attaching the event handler to $('#demolist li span') .

EDIT:

You need to wrap the attached event in a $(document).ready() function.

Here's a working fiddle: https://jsfiddle.net/hc4rpyt8/8/

And here's the code you need:

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

Answer 2

Working code:

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

And a fiddle here: https://jsfiddle.net/beekvang/xj5oponw/