This has been flagged as a duplicate but to clarify once my drop down appears I do not want to run any more jquery click function on it. I simply wish to select the drop down available by select I mean select it as you would a regular drop down.
I'm currently adding some li elements from some dynamic data like so.
$(document).ready(function() {
$('#size li').click(function() {
if ($(this).text() != '') {
// var select = $(".dynamic li").closest("ul").prop("id");
// var value = $(this).text();
// var dependent = $(this).closest('ul').data('dependent');
// var _token = $('input[name="_token"]').val();
var productId = $(this).attr("value");
// here we'll make ajax call to post details of dropdown and get new data
$.ajax({
url: "{{ url('product_details/fetch/productId') }}".replace("productId", productId),
dataType: "json",
success: function(result) {
// clear the drop downs so no data will be there
$("ul[data-dependent='quantity']").empty();
// add quantity drop down based on selected size
$.each(result.productQuanties, function(i, item) {
$("ul[data-dependent='quantity']").append("<li value=" + item.quantity_name + "><span>" + item.quantity_name + "</span></li>");
})
This appends to an empty drop down ul and the html code viewable in the dom is this:
<li value="25"><span>25</span></li>
<li value="50"><span>50</span></li>
<li value="100"><span>100</span></li>
etc.
This appears as a drop down on my web page. However when I go to select the li nothing happens. By nothing happens I mean the drop down just appears as it did before I clicked anything. The data is still there but it is not showing as selected.
The expected result would be for me to just click on it and it remained clicked.