web-dev-qa-db-ja.com

確認するために「いいえ」と言った場合に選択ボックスの値が変更されないようにする方法

国の選択ボックスを使用している場合、ユーザーが国を選択するとブランチの追加リンクが表示され、ユーザーはその国の下にブランチを追加しますが、ユーザーが国を変更したい場合は、その国に関するすべてのブランチを破棄する必要があります。国を変更する前に、確認ボックスが表示され、警告が表示されます。すべて正常に機能していますが、

確認ボックスで[キャンセル]をクリックすると、ブランチは残りますが、選択ボックスの値が新しい国に変更されます（キャンセルをクリックしても）

ユーザーが国を変更するためにキャンセルした場合、選択ボックスの値も前の国になる必要があります。

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();   
    }
jquerydrop-down-menu
20
JustLearn

次のように、前の値を保存して、必要に応じて元に戻すことができます。

_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
});
_
19
Nick Craver

以下の解決策は私のために働いた。まず、onfocusが呼び出されます。このイベントは、現在の値を属性「PrvSelectedValue」に保持します。次に、onchangeが呼び出され、ユーザーが確認ポップアップをキャンセルした場合に前の値を設定します。returnfalseは、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>
3
garish

以下は私のために働いています（Chrome）。上記ではありません。 this.defaultValueの場合、デフォルトで選択されたテキスト/値以外は空になります。

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

私は確かにこのことでかなり初心者なので（1、2か月しか学んでいない）、嘲笑の危険を冒してこの返信を投稿していますが、これを行うだけで同様の状況（タイムゾーンの変更）を処理できました：

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

次に、HTMLでdata-originaltimezone = "whatever"をselectに含めました。セレクトのクラスタイムゾーンドロップダウンもありました。お役に立てば幸いです。 :)

0
Kris Kibak