Добавление новых значений в список select на лету


задача: динамически всем селектам на странице добавить справа кнопку для добавления новых опций. при клике на кнопку появляется диалоговое окно, в которое вводим новое значение. после подтверждения это значение выбирается как selected.

1. подключем jquery и jquery-ui

<link rel="stylesheet" href=" http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src=" http://code.jquery.com/jquery-1.8.2.js"></script>
<script src=" http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

2. в конце странице подключаем наш кусок кода:

var select_name = [];

$('select').each(function() {
	select_name.push($(this).attr('name').toString());
});
var vsego_sel	= select_name.length;
console.log(select_name);
console.log(vsego_sel);

for(var i=0;i<vsego_sel;i++){
	$("select[name='"+select_name[i]+"']").parent().addClass("form-inline");
	$("select[name='"+select_name[i]+"']").removeClass("span4").addClass("span3");
	$("select[name='"+select_name[i]+"']").after("<span class='btn' id='"+select_name[i]+"' onclick=\"addOpt('"+select_name[i]+"')\">+</span>");
}

function addOpt(id) {
	console.log('#'+id);
	
 var dynamicDialog = $('<div id="MyDialog_'+id+'">\
            <p>Add new option:</p>\
			<input id="diag_val_'+id+'" type="text">\
            </div>');

dynamicDialog.dialog({ title: "Success Message",
	modal: true,
	resizable: false,
	buttons: {
			"Submit": function() {
				var diag_val = $('#diag_val_'+id).val();
					diag_val = diag_val.replace(/[^\d\w\-_ ]/g, '');
					diag_val = $.trim(diag_val);
				console.log(diag_val);
				$('select[name="'+id+'"]').append('<option value="'+(diag_val ? diag_val : 'Empty')+'">'+(diag_val ? diag_val : 'Empty')+'</option>');
				$('select[name="'+id+'"] option[value="'+diag_val+'"]').attr('selected','selected');
				$('#MyDialog_'+id).dialog( "close" );
				$('#MyDialog_'+id).remove();
			},
			"Cancel": function() {
				$('#MyDialog_'+id).dialog( "close" );
			}
			}
	});
}

по логике: выбираем все селекты на странице, добавляем им немного стилей и справа вставляем кнопку + на кнопку вешаем функцию. далее делаем обработку данных с помощью jquery-ui. селекты у меня все с именами. поэтому на основе их генерю дальше нужные id. итого выглядит вот так:

ПОЛЕЗНО  Responsive Video jQuery Plugin

Добавление новых значений в список select на лету Добавление новых значений в список select на лету