如果我说不确认,如何防止更改选择框值

Question

即时通讯使用国家/地区的选择框,当用户选择国家/地区时,会显示添加分支链接,用户在该国家/地区下添加分支机构,但是当用户想要更改国家/地区时,则该国家/地区的所有分支机构都应该被删除.在更改国家之前,会出现一个确认框并显示警告..但是一切正常

如果我点击确认框中的"取消",那么分支仍然在那里,但选择框值更改为新国家(即使我点击取消)

我需要,如果用户取消更改国家/地区,则选择框值也将是以前的国家/地区.

请告诉我如何使用JQuery,我的代码如下

<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

您可以存储以前的值并在需要时将其设置回来,如下所示:

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

或者使用.data()作为@Gaby暗示,就像这样:

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

Answer 2

下面的解决方案对我有用。首先调用 onfocus。此事件将当前值保留在属性“PrvSelectedValue”中。其次调用onchange，如果用户取消确认popup，我们设置之前的值。return false用于防止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>