how to prevent to change selectbox value if i say no to confirm

Question

Hello ALL,

i m using a select box of country, when user select a country then add branch link appears and user add branches under that country, but when user want to change country then all branches regarding that country should be destryoed. before changing a country a confirm box appears and show warning..everything is working fine but

if i click 'Cancel' on confirm box then branches remains there but select box value changed to new country (even i click on cancel)

i need that if user cancel to change country then select box value also would be previous country.

please tell how to do it with JQuery my code is given below

<form>
<table>
    <tr>
       <td >Select Country :</td>
       <td >
       <select name="country_id" id="country"  class="selectbox" title="Please select country" validate="required:true" onchange="javascript:showBranch();" >
         <option value="" >Select Country </option>
         <option value="00002" > Afghanistan</option>
         <option value="00054" > Croatia</option> 
         <option value="00060" > Dominica</option> 
         <option value="00062" > Ecuador</option> 
         <option value="00064" > El Salvador</option> 
         <option value="00067" > Estonia</option> 
         <option value="00099" > India</option> 
       </select>
       </td>
   </tr>
   <tr>
       <td>&nbsp;</td>
       <td>
        <div id="branches">
        <!-- Raw Branch Details-->
             <div><span><a title="First Branch" href="">First</a></span></div>
             <div><span><a title="Second Branch" href="">Second</a></span></div>
             <div><span><a title="Third Branch" href="">Third</a></span></div>                  
        </div>
        <div id="brancherror"></div>
       </td>
   </tr>
   <tr>
    <td>&nbsp;</td>
    <td align="left">
        <span id="branchLink" style="display:none" >
        <a href="#" class="thickbox" id="branchhref">Add Branch(es)</a></span>
    </td>
  </tr>
 </table>
 </form>

function showBranch()
    {   
        var countryid = jQuery('#country').val();
        if (jQuery("#branches>div").size())
        {
            if (confirm('If country has been changed then data corresponding to present branches will lost.Do you want to continue?'))
            {
                jQuery('#branches').html('');
            }

            jQuery('#branchhref').attr({href: "index.php?option=com_advertise&view=createbranch&format=raw&country=" + countryid + "&KeepThis=true&TB_iframe=true&height=500&width=900",title: 'Add Branch'});
        }

        else
        {
            jQuery('#branchhref').attr({href : "index.php?option=com_advertise&view=createbranch&format=raw&country=" + countryid + "&KeepThis=true&TB_iframe=true&height=500&width=900",title:'Add Branch'});
            return true;
        }
        jQuery('#branchLink').show();   
    }

Answer 1

You can just store the previous value and set it back if needed, like this:

var countryVal;
$("#country").change(function() {
  var newVal = $(this).val();
  if (!confirm("Are you sure you wish to destroy these country branches?")) {
    $(this).val(countryVal); //set back
    return;                  //abort!
  }
  //destroy branches
  countryVal = newVal;       //store new value for next time
});

Or use .data() as @Gaby suggests, like this:

$("#country").change(function() {
  var newVal = $(this).val();
  if (!confirm("Are you sure you wish to destroy these country branches?")) {
    $(this).val($.data(this, 'val')); //set back
    return;                           //abort!
  }
  //destroy branches
  $.data(this, 'val', newVal);        //store new value for next time
});