Edit jquery editable select
12,369
UPDATE:
Another way in order to get the value you are looking for is:
$('#basic').siblings('.es-list').find('li.selected').data('value')
For the text instead you can use:
$('#basic').siblings('.es-list').find('li.selected').text()
Old answer:
The plugin jquery-editable-select exposes an event called "onSelect".
So you need to attach an event handler for this event and listen for the form submit:
$(function () {
var selectedEleValue = null;
$('#basic').editableSelect({
onSelect: function (element) {
selectedEleValue = element.val();
console.log('The val is: ' + element.val() + ' The text is: ' + element.text());
}
});
$('form[action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/"]').on('submit', function(e) {
if (selectedEleValue != null) {
$('#basic').val(selectedEleValue);
}
})
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script src="https://rawgit.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get">
<select id="basic" name="basic">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="submit" value="Submit" />
</form>
Author by
Ahmed
Updated on July 14, 2022Comments
-
Ahmed almost 2 years
I need a little help for this script. It is a jQuery Plugin that converts a select into an text field with suggestions. When I use it in a form it submits the text not the value.
How can I use get the value of options not the text?
Example:
<link rel="stylesheet" href="https:rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css"> <form action="http://stackoverflow.com/questions/38437449/edit-jquery-editable-select/" method="get"> <select id="basic" name="basic"> <option value="0">Zero</option> <option value="1">One</option> <option value="2">Two</option> </select> <input type="submit" value="Submit" /> </form> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="https://rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script> <script> window.onload = function () { $('#basic').editableSelect(); } </script>
It should send
"000"
not"zero"
, and results indomian.com/page.php?data=000
notdomian.com/page.php?data=zero
. -
gaetanoM almost 8 years@Ahmed Could you try my snippet?
-
Ulviyya Ibrahimli about 3 yearsif 2 select in jsp .siblings('.es-list').find('li.selected').data('value') return same result or undifined, why? how handle it?