如何使用jQuery UI在模式对话框中重置选择菜单

时间:2018-07-19 20:47:47

标签: javascript jquery jquery-ui

我在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>

1 个答案:

答案 0 :(得分:0)

您需要像这样先更改索引:

CopyFromMemory