jQueryUI Dialog

HTML

<div id="yesorNobtn">

 
You have edited table value so can i update the values in dropdown box?
 

  <button id="lenc_cancel" class="mtop">
  Cancel
  </button>
  <button id="lenc_Ok" class="mtop">
  Ok
  </button>

</div>

<div id="myDialog">
  
  <table id="comTbl">
  <thead>
 
  </thead>
  <tbody>
    <tr>
    <td><span at-data="Test1">Test1</span></td>
      <td><span class="hidden">Revert</span><span class="">Remove</span></td>
    </tr>
     <tr>
     <td><span at-data="Test2">Test2</span></td>
      <td><span class="hidden">Revert</span><span class="">Remove</span></td>
    </tr>
     <tr>
     <td><span at-data="Test3">Test3</span></td>
      <td><span class="hidden">Revert</span><span class="">Remove</span></td>
    </tr>
     <tr>
     <td><span at-data="Test4">Test4</span></td>
      <td><span class="hidden">Revert</span><span class="">Remove</span></td>
    </tr>
     <tr>
     <td><span at-data="Test5">Test5</span></td>
      <td><span class="hidden">Revert</span><span class="">Remove</span></td>
    </tr>
  </tbody>
  </table>
  
  <div class="mtop"><a href="#" id="addnewrow">Add New row</a></div>
  
  <button id="cancel" class="mtop">
  Cancel
  </button>
  <button id="save" class="mtop">
  Save
  </button>
  
</div>
 

<select id="companyNameList">
<option>Select</option>
<option value="Tests1">Test1d</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
<option value="Test5">Test5</option> 
</select>

<span><a href="#" id="addnew">Add New</a></span>

CSS

.mtop{margin-top:15px;}
#companyNameList{
  width:500px;
  margin-bottom:12px;
}
.hidden{
  display:none;
}
.bordernone{
  border:0px;
  border-width:0px;
}

.inputwidth{
  width:25px;
}





































table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
 
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
td:nth-child(2){
  border:none;
  background-color:none;
}

JavaScript

//Set up the dialog box
$("#myDialog").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "Add New Name" 
});
$("#myDialog").dialog( "option", "width", 500 );

$("#yesorNobtn").dialog({
    autoOpen  : false,
    modal     : true,
    title     : "A Dialog Box"
 
});
//Open the dialog box when the button is clicked.
$('#addnew').click(function() {
    $("#myDialog").dialog("open");
});
$('#cancel').click(function() {
    $("#myDialog").dialog("close");
});

$('#addnewrow').click(function() {
  $("#comTbl tbody").append("<tr><td><span at-data><input type='text' class='bordernone' value=''></span></td><td><span class='hidden'>Revert</span><span class=''>Remove</span></td></tr>");
});

$('#comTbl tbody tr td:nth-child(1)').click(function() {
    
     var getVal=$(this).text();  
     $(this).html("<span at-data><input type='text' class='bordernone' az-data="+getVal+" value="+getVal+"></span>");
     $(this).find('span').find('input').focus();
     $(this).next('td').find('span:nth-child(1)').removeClass('hidden');
     $(this).next('td').find('span:nth-child(2)').addClass('hidden');
});

/*Remove Row*/
 $("#comTbl tbody tr td:nth-child(2) span:nth-child(2)").click(function(){ 
              $(this).parents("tr").remove();
 });
 
 /*Revert*/
 $("#comTbl tbody tr td:nth-child(2) span:nth-child(1)").click(function(){ 
              var at_dataVal=$(this).parents("tr").find('td:nth-child(1)').find('span').find('input').attr('az-data');
             
              $(this).parents("tr").find('td:nth-child(1)').find('span').find('input').val(at_dataVal);
              $(this).parents("tr").find('td:nth-child(1)').find('span').attr('at-data').val(at_dataVal);
             
 });
 
 
 /*Save*/
 $("#save").click(function(){ 
 
 saveddatainDd();
 
 });
 
 function saveddatainDd(){
 
    var tblvalues = [];
    var ddvalues = [];
  
   $("#comTbl").find("tr").each(function() {
      tblvalues.push($(this).find("td:first").find('span').attr('at-data'));
  ...