I do custom editable <select> .
Registered styles, registered divas, it remains to describe the behavior. Well, it seems that everything is simple, BUT ... I process a click on the input to display a dropdown list.
To hide it, do this:
var selectElement1 = $('#selectInput1'); selectElement1.click(function() { $('#SelectDropdown1').show(); }); $('#1').click(function() { selectElement1.text('1'); }); selectElement1.blur(function() { $('#SelectDropdown1').hide(); }); Everything is OK, the drop-down list falls out, I press it in any part of the screen it disappears.
Now we need to make it possible to select a value from the list ... and here’s the problem. I'm trying to process a click on an item, but nothing happens, it’s just that the list collapses and that's it. It seems that Blur works ... So, how can I arrange this thing? And this list will eventually be taken from the database. Those. assign an id to them and then handle click on the id will not work.
The form:
<div class="jq-selectbox jqselect"> <input id="selectInput1" class="form-control"></input> <div id="SelectDropdown1" class="jq-selectbox__dropdown" style="position: absolute; display:none"> <ul style="position: relative; list-style: none; overflow: auto; overflow-x: hidden;"> <li onclick="SelectOpen()">1</li> <li id="1">2</li> <li>3</li> </ul> </div> </div>