如何添加/编辑对话框表单的修改内容到调用元素

How to add/ Edit Modified Content of a dialog form to the Calling Element

本文关键字：修改 元素 调用 表单 对话框 何添加 添加 编辑      更新时间：2023-09-26

我正在尝试创建一个可拖动的选择选项，当它被拖动到主内容区时，我添加了两个控件来删除拖动元素和其他属性。可拖拽选择的Html格式为

<div class="demo">
<div class="tools"> 
<ul>
    <li class="draggable" >
     <div class="control">
      <label class="orig">&nbsp;</label>
      <select><option> Select Option</option></select>
      <div class="delete" style="display:none"><sup>x</sup></div>
      <div class="properties select" style="display:none">Properties</div>
     </div> 
    </li>
 </ul>   
</div>        
</div>

当选择控件被删除时，我有以下代码运行以添加属性和删除选项

$('.select').live('click', function() {
        var label = $(this).parent().find('label').html();
        $("#select_label").val(label);
        var option = $(this).parent().find('select').children();
        $( "#dialog-select" ).dialog( "open" ).data('parent_div',$(this).parent());
        $('#add_more').live('click', function() {
        if(($(this).parent().prev().find("input").val()) == "")
        {
            alert("Please enter a value for option");
            $(this).parent().prev().find("input").focus();
            return (false);
        }
        else{// Add another option field to the form
            $(this).parent().prev().after('<fieldset><label for="select_option">Option</label>      <input type="text" name="select_option" class="text ui-widget-content ui-corner-all" /></fieldset>');
            }               
        });         
        return false;
});

这将添加一个X(用于删除元素)和一个属性链接到Select选项。当我点击属性，下面的窗体在模态对话框中打开

<div id="dialog-select" title="Select Properties" style="display:none">
<form>
<fieldset>
    <label for="select_label">Enter Label </label>
    <input type="text" name="select_label" id="select_label" class="text ui-widget-content ui-corner-all" />        
</fieldset>
<fieldset>
    <label for="select_option">Option</label>
    <input type="text" name="select_option" class="text ui-widget-content ui-corner-all" />     
</fieldset>
<fieldset>
    <input type="button" name="add_more" id="add_more" value="Add More Option" />
</fieldset>
</form>

从用户接收标签和选择选项

当用户添加一些选项和标签并单击应用按钮时，执行以下代码:

 $("#dialog-select").dialog({
                        autoOpen: false,
                        height: 300,
                        width: 350,
                        modal: true,
                        buttons: {
                                "Apply": function(){
                                    var label = $("#select_label").val()
                                    var $elem_clicked = $("#dialog-select").data('parent_div'); 
                                    $elem_clicked.find('label').html(label); 
                                    // I need something to do here
                                    $( this ).dialog( "close" );                                        
                                    },
                                Cancel: function() {
                                            $( this ).dialog( "close" );
                                        }
                        }
                         });

现在的问题是，用户在选项中添加的内容没有被添加到拖动到内容区域的选择选项中。正如你可以在这里看到http://jsfiddle.net/bilalkhan/D7pMT/4/标签正在更新，但我不知道如何添加/编辑用户在对话框中添加的选项。请帮我解决这个问题

我已经整理了如何添加，这里是代码

 // Add the Options to the Select Element Here
                                    $('input[name=select_option]').each(function(){
                                        // get the Values of options here
                                        $(this).attr("value", $(this).val());
                                        if($(this).val() != "")
                                        {// if the option is not empty
                                            // add options to the select element
                                            $elem_clicked.find('select').append('<option value="'+$(this).val()+'" >'+$(this).val()+'</option>');   
                                        }
                                    });
相关文章：