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

Question

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

The following is working for me (Chrome). Above not. In case of this.defaultValue, it goes to empty other than default selected text/value.

if(confirm('sure?')){
    //do sth;
}else{
    this.selectedIndex = 0; // if cancel the confirm window, option remains as unchanged.
}

Answer 2

Below solution worked for me. First of all onfocus is called. This event keeps the current value in a attribute "PrvSelectedValue". Secondly onchange is called, we set the previous value if user cancel the confirmation popup.return false is used to prevent the postback in ASP.NET.

<select   
onfocus="this.setAttribute('PrvSelectedValue',this.value);" 

onchange="if(confirm('Do you want to change?')==false){ this.value=this.getAttribute('PrvSelectedValue');return false; }" 

></select>

Answer 3

I'm posting this reply at the risk of ridicule because I'm admittedly pretty noob at this stuff (only been learning a month or two), but I was able to handle a similar situation (changing time zones) just doing this:

$(".timezonedropdown").change(function() {
    var newVal = $(this).val();
    if(!confirm("Are you sure?")) {
        $(this).val($(this).closest('select').attr("data-originaltimezone"));
    }
});

Then in my html I included data-originaltimezone="whatever" in the select. I had the class timezonedropdown for the select as well. Hope that helps! :)

Answer 4

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