0

(おそらく) ここで簡単な jQuery の質問。私はjQuery UIダイアログを使用しており、確認を行っています。基本的に、ユーザーが特定のオプションを (他の状況と組み合わせて) 選択したときに、最後に選択したオプションに戻すか、それができない場合はデフォルトのオプションに戻すことができるようにしたいと考えています。

オプションには「selected」属性もありません。これは私の頼りになる例でした。これを行う方法はありますか？

ここにjsがあります：

alert('hey')
if (document.frm.notNull.checked == true) {
    // This is where it ends!
    if ($('input[name=valueTextField]').length > 1) {
        $('#dialog p').empty();
        $('#dialog p').html("You're going to lose your stuff if you do this. You sure you want to?");
        $('#dialog').dialog({
            autoOpen: true,
            width: 600,
            modal: true,
            buttons: {
                "<spring:message code='dialogBox.cancelConfirmation.YES'/>": function() {
                    $(this).dialog("close");
                    $("#bottom").css('visibility', 'visible');
                    $('.edit-new').css('visibility', 'hidden');
                    $('.edit-trash').css('visibility', 'hidden');
                    // if table has more than one row, delete the rest.
                    deleteExtraRows('valueTable');
                    return true;

                },
                "<spring:message code='dialogBox.cancelConfirmation.NO'/>": function() {
                    $(this).dialog("close");

                    // Need to revert the user back to where they came from here.
                    $('#control[value=1]').attr('selected', true);
                    // return false;
                }
            }
        });
    } else {
        $("#bottom").css('visibility', 'visible');
        $('.edit-new').css('visibility', 'hidden');
        $('.edit-trash').css('visibility', 'hidden');
        // if table has more than one row, delete the rest.
        deleteExtraRows('valueTable');
        return true;

     }
 }​

これは HTML です (動的にレンダリングされます):

<div class="lbl">
    <label>Control</label>
</div>
<select style="margin:0 0 0 8px; left:15px; position:relative;" name="control"
id="control" onChange="checkTableVisibility();">
    <option value=1>Check Box</option>
    <option value=0>Dropdown Menu</option>
    <option value=3>Radio Button</option>
    <option value=2 selected="selected">Text Box</option>
</select>
4

2 に答える 2

0

これがサンプルコードです。これがあなたを助けるかもしれないことを願っています

##### Jquery Part #####
<script>
$(document).ready(function(){
 var dropdownControl =$("#control");
 var selectedValue = dropdownControl.val(); 
 dropdownControl.change(function(){
  var dropItem = $(this);
  $('#dialog').dialog({
  autoOpen: true,
      width: 600,
      modal: true,
      buttons: {
          'Ok': function(){
                  selectedValue = dropItem.val();
                  $(this).dialog("close");
               },
               'Cancel' : function(){
                     dropdownControl.val(selectedValue);
                     $(this).dialog("close");
               } 
              }
  });
  });
});
</script>


 #### HTML #####
<body>
 <div>
    <select style="margin:0 0 0 8px; left:15px; position:relative;" name="control" id="control">
     <option value=1>Check Box</option>
     <option value=0>Dropdown Menu</option>
     <option value=3>Radio Button</option>
     <option value=2 selected="selected">Text Box</option>
    </select>
 </div>
 <div id="dialog" style="display:none;">
   Do you want to change value ?
 </div>
</body>

もっとコードを入れておけばよかったのに。私はあなたの場合に役立つかもしれないいくつかのコードを追加しました。私の変更とそれに関連するコメントを確認してください。コード全体をjQuery対応関数にラップしています。うまくいったかどうか教えてください。

 $(document).ready(function(){
  var dropdownControl =$("#control");
  var previousValue = dropdownControl.val(); 
  /// Please add above line of code on your jQuery onload section. So that previous value get set, for the first time, whenever dom gets load. so that you can use it for later cases
alert('hey')
if (document.frm.notNull.checked == true) {
  // This is where it ends!
  if ($('input[name=valueTextField]').length > 1) {
      $('#dialog p').empty();
      $('#dialog p').html("You're going to lose your stuff if you do this. You sure    you want to?");
    $('#dialog').dialog({
        autoOpen: true,
        width: 600,
        modal: true,
        buttons: {
            "<spring:message code='dialogBox.cancelConfirmation.YES'/>": function() {
                $(this).dialog("close");
                $("#bottom").css('visibility', 'visible');
                $('.edit-new').css('visibility', 'hidden');
                $('.edit-trash').css('visibility', 'hidden');
                previousValue = dropdownControl.val();
                // please reset previousValue with the new one that you approved to change so that next time when dropdown changes it value it could use it
                // if table has more than one row, delete the rest.
                deleteExtraRows('valueTable');
                return true;

            },
            "<spring:message code='dialogBox.cancelConfirmation.NO'/>": function() {
                $(this).dialog("close");

                // Need to revert the user back to where they came from here.
                $('#control[value=1]').attr('selected', true);
                 dropdownControl.val(previousValue);
                // Please replace dropdown value with the old one if you want to revert changes.
                // return false;
            }
        }
    });
} else {
    $("#bottom").css('visibility', 'visible');
    $('.edit-new').css('visibility', 'hidden');
    $('.edit-trash').css('visibility', 'hidden');
    // if table has more than one row, delete the rest.
    deleteExtraRows('valueTable');
    return true;

 }
}​ 
});
于 2012-10-03T17:53:58.180 に答える
0

私はあなたの質問をよく理解していると思います。私の応答は次のようになります。変数を使用して、選択した値を保存します。

$("yourSelect").change(function(){
 selected = $(this).val();
});

次に、クリック時に値をリセットして、たとえばボタンをリセットできます

$("#reset").click(function(){
  $("yourSelect").val(selected);
 });
于 2012-10-03T16:50:53.297 に答える