Jquery selectmenu plugin with text input option
Jquery selectmenu plugin with text input option
HTML
<select id="ddlCountry" class="Other">
<option value="text">text</option>
<option value="other">other iui gkjghkjhkhj</option>
</select>
<select id="ddlTest" class="Other" style="width:50px;">
<option value="text">texthkuk gjituy</option>
<option value="other">other</option>
</select>
<span class="createOption" style="display: none;"><span class="errorMessage" style="color: Red;
font-size: 15px; font-weight: bolder;"></span>
<br />
<input id="tbOthers" type="text" />
<br />
<input type="button" id="btnAddOption" value="Add Option" />
<input type="button" id="btnCancel" value="Cancel" />
</span>
JavaScript
$(document).ready(function () {
$('select.Other').after($('.createOption:last').clone());
$('select.Other').live('change', function () {
var objSelect = $(this);
if (objSelect.val() === 'other') {
$('.createOption:visible').hide().prev('select').show();
objSelect.hide().next('.createOption').show().find('#tbOthers').val('');
}
});
$('.createOption').find('#btnAddOption').live('click', function () {
var objAdd = $(this);
var parentAdd = objAdd.parents('.createOption');
var addOptionValue = $.trim(parentAdd.find('#tbOthers').val()).toLowerCase();
if (addOptionValue.length > 0) {
if (parentAdd.prev('select').find('option[value="' + addOptionValue + '"]').length !== 0) {
parentAdd.find('.errorMessage').text('Option Alredy Exist.').fadeIn(500).fadeOut(600);
} else {
parentAdd.prev('select').find('option[value="other"]').before($('<option />', { 'value': addOptionValue }).text(addOptionValue));
parentAdd.hide().prev('select').show().val(addOptionValue);
}
}
else {
parentAdd.find('.errorMessage').text('Enter Some Text.').fadeIn(500).fadeOut(500);
}
});
$('.createOption').find('#btnCancel').live('click', function () {
$(this).parents('.createOption').hide().prev('select').show();
});
});