如何使用jQuery UI在模式對話框中重置選擇菜單

Question

我在jQuery模式對話框中有一個jQuery UI selectmenu 。 我想清除模式對話框關閉時的選擇selectmenu選擇，無論是通過“確定”或“取消”按鈕，還是通過關閉框。

我正在嘗試更新我未編寫的Web應用程序，以消除似乎已撤回的jAlert / jConfirm / jPrompt庫的使用。 我創建了一個我想工作的示例，然后才拆開我沒有編寫的該應用程序來替換許多jPrompt調用。

我已經證明了我可以在模型對話框中顯示selectmenu ，並且可以將選擇返回到模態對話框，我打算將其存儲在需要的地方。

到目前為止，我還無法執行的操作是在用戶退出模式對話框時，通過單擊“確定”或“取消”按鈕或關閉框來清除選擇selectmenu的選擇。 我嘗試應用在該站點上找到的大約六個建議，但在這種情況下，這些建議均無效。

我在這里包括了我的示例：

<button id="opener">Change Category</button>
<div id="popup_message" style="display: none;">
  <form id="category_popup">
    <select name="category" id="category">
      <option>Choose a category</option>
      <option value="G1">G1</option>
      <option value="G3">G3</option>
      <option value="C1G1">C1G1</option>
      <option value="C2G1">C2G1</option>
      <option value="C3G1">C3G1</option>
      <option value="C4G1">C4G1</option>
      <option value="C5G1">C5G1</option>
      <option value="C6G1">C6G1</option>
      <option value="C7G1">C7G1</option>
      <option value="C8G1">C8G1</option>
      <option value="C9G1">C9G1</option>
      <option value="C1G3">C1G3</option>
      <option value="C2G3">C2G3</option>
    </select>
  </form>
</div>
<script>
  $('#popup_message').dialog({
    autoOpen: false,
    modal: true,
    title: 'Choose Category',
    buttons: [{
        text: 'OK',
        click: function() {
          alert('Category= ' + $('#category').find(':selected').text());
          $(this).dialog('close');
          return $('#category').val();
        }
      },
      {
        text: 'Cancel',
        click: function() {
          $(this).dialog('close');
        }
      }
    ]
  });
  $('#opener').on('click', function() {
    $('#popup_message').dialog('open');
  });
  $('#popup_message').on('dialogclose', function() {
    // $('#category_popup option').attr('selected',false);
    // $('#category_popup').trigger('reset');
    $('#category').selectmenu('refresh');
    // $(':input','#category_popup').removeAttr('selected');
    // $('#category_popup').val([]);
    truth = true; // to allow a breakpoint here
  });
  $('#category').selectmenu();
</script>

Answer 1

您需要像這樣更改索引：

$('#popup_message').on('dialogclose', function() {
  // $('#category_popup option').attr('selected',false);
  // $('#category_popup').trigger('reset');
  var myselect = $("select#category");
  myselect[0].selectedIndex = 0;
  myselect.selectmenu("refresh");
  // $(':input','#category_popup').removeAttr('selected');
  // $('#category_popup').val([]);
  truth = true; // to allow a breakpoint here
});