Question

I am trying to make a draggable select option and when that is dragged to the Main Content Area i add two controls to that One to delete the Dragged Element and Other for Its Properties. The Html for the draggable select is like

<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>

When the Select Control is dropped i have the following code which runs to add the properties and delete options to it

$('.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;
});

This adds a X (to delete the Element) and a Properties Link to the Select Option.
When i click on the Properties the Following Form is opened in a modal dialog

<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>

This Accepts from user a Label and Options for the Select Options,

When the User Adds some options and a label and click on the apply button the following code is executed.

 $("#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" );
                                        }
                        }
                         });

NOW the problem is that what the user has added in the Options is not getting added to the select Options which was dragged to the content area.
As you can see here http://jsfiddle.net/bilalkhan/D7pMT/4/ that the label is updating but i can not figure out how to Add/Edit the options that the user has Added in the Dialog Form.
Please help me with this issue..

Answer 1

I have sorted out how to add that here is the code

 // 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>');   
                                        }

                                    });