Using value attribute of <option> tag about jquery-editable-select HOT 3 OPEN

		$('#district').editableSelect('add', function(){
			$(this).val(item.id);
			$(this).text(item.name);
		});

from jquery-editable-select.

@adl1995 this happens because the plugin replaces the select element with a text input and a hidden ul list of li items generated using the select options.

What you can do to fix this is change your code like this:

First replace your select html code with this:

<input type="hidden" name="country_code" id="country_code">
<select id="country_code_dropdown">
    <option data-cc="ZM" >Zambia</option>
    <option data-cc="AL" >Albania</option>
    <option data-cc="DZ" >Algeria</option>
    ...
</select>

Then where you included the script tag with the options for your plugin you can use this:

<script type="text/javascript">
	$('#country_code_dropdown').editableSelect({
		... your plugin config options
	}).on('select.editable-select', function (e, el) {
		// el is the selected item "option"
		$('#country_code').val(el.data('cc'));
	});
</script>

What you're doing here is using a hidden input to store the country code value to send it to your php backend using POST, and in your frontend you're using custom "data" attributes in your option items that the plugin will NOT remove from your select, thus being able to manipulate all the data you want with javascript, which is precisely what you're doing.
In the javascript when you select an item you get the "data" that you need and assing it value to your hidden field.

I haven't tested this in php but it should work just fine.

from jquery-editable-select.

@mosleh200989 what exactly did you mean there? What is item ? What is item.id and name? And how should we use this snippet to get our 2-letter value in this case?

from jquery-editable-select.