задача: динамически всем селектам на странице добавить справа кнопку для добавления новых опций. при клике на кнопку появляется диалоговое окно, в которое вводим новое значение. после подтверждения это значение выбирается как 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. итого выглядит вот так: