javascript - 如何修复弹出窗口中的 列表？

Question

我的 jQuery 弹出窗口有问题。这是说明我的问题的 gif:

我的问题是什么？

如果我不从列表中选择任何选项并在某个随机位置单击，选项列表将位于窗口下方。

HTML 片段:

<div id="addRow-dialog" title="New Field">
    <form>
    <fieldset>
        <label for="addRow-fieldName">
            Field name</label>
        <input type="text" id="addRow-fieldName" value="" class="text ui-widget-content ui-corner-all" />
        <label for="addRow-fieldType">
            Field type</label>
        <select id="addRow-fieldType">
            <option>NUMBER</option>
            <option>CHAR(32)</option>
            <option>DATE</option>
            <option>VARCHAR</option>
            <option>BLOB</option>
        </select>
    </fieldset>
    </form>
</div>

JavaScript 片段:

// Prepare popup dialogs
addRowDialog = $("#addRow-dialog").dialog({
    autoOpen: false,
    resizable: false,
    height: 'auto',
    width: 250,
    modal: false,
    buttons: {
        "OK": addRow,
        Cancel: function () {
            addRowDialog.dialog("close");
        }
    },
    close: function () {
        addRowType.val("NUMBER");
        addRowType.selectmenu("refresh");
        addRowForm[0].reset();
    }
});
addRowForm = addRowDialog.find("form").on("submit", function (event) {
    event.preventDefault();
    addRow();
});
addRowName = $("#addRow-fieldName");
addRowType = $("#addRow-fieldType");

如您所见，“addRowType”字段代表定义选择列表中选项的标签。

CSS

html
{
    height: 100%;
    width: 100%;
}

body
{
    font: 12px/18px "Trebuchet MS", sans-serif;
    margin: 0px;
}

select
{
    width: 120px;
}

input[type=text]
{
    font: 12px/18px "Trebuchet MS", sans-serif;
    border: 1px solid #e2e4e7;
}

input[type=text]
{
    outline: none;
}

::selection
{
    background-color: #cfcfcf;
}

::-moz-selection
{
    background-color: #cfcfcf;
}



hr
{
    border-width: 0px;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(226,228,231,0), rgba(226,228,231,1), rgba(226,228,231,0));
    background-image: -moz-linear-gradient(left, rgba(226,228,231,0), rgba(226,228,231,1), rgba(226,228,231,0));
    background-image: -ms-linear-gradient(left, rgba(226,228,231,0), rgba(226,228,231,1), rgba(226,228,231,0));
    background-image: -o-linear-gradient(left, rgba(226,228,231,0), rgba(226,228,231,1), rgba(226,228,231,0));
}

有人知道如何解决这个问题吗？

Answer 1

这对我有用。我花了一些时间来寻找您正在使用的 jQuery UI 东西。

$(document).ready(function() {
  // Prepare popup dialogs
  addRowDialog = $("#addRow-dialog").dialog({
    autoOpen: true,
    resizable: false,
    height: 'auto',
    width: 250,
    modal: false,
    buttons: {
      "OK": function() {
        addRowDialog.dialog("close");
      },
      Cancel: function() {
        addRowDialog.dialog("close");
      }
    },
    close: function() {
      addRowType.val("NUMBER");
      addRowType.selectmenu("refresh");
      addRowForm[0].reset();
    }
  });
  addRowForm = addRowDialog.find("form").on("submit", function(event) {
    event.preventDefault();
    addRow();
  });
  addRowName = $("#addRow-fieldName");
  addRowType = $("#addRow-fieldType");

  addRowType.selectmenu();
});

html {
  height: 100%;
  width: 100%;
}

body {
  font: 12px/18px "Trebuchet MS", sans-serif;
  margin: 0px;
}

body .ui-selectmenu-button.ui-button {
  width: 120px;
}

input[type=text] {
  font: 12px/18px "Trebuchet MS", sans-serif;
  border: 1px solid #e2e4e7;
  outline: none;
}

::selection {
  background-color: #cfcfcf;
}

::-moz-selection {
  background-color: #cfcfcf;
}

hr {
  border-width: 0px;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(226, 228, 231, 0), rgba(226, 228, 231, 1), rgba(226, 228, 231, 0));
  background-image: -moz-linear-gradient(left, rgba(226, 228, 231, 0), rgba(226, 228, 231, 1), rgba(226, 228, 231, 0));
  background-image: -ms-linear-gradient(left, rgba(226, 228, 231, 0), rgba(226, 228, 231, 1), rgba(226, 228, 231, 0));
  background-image: -o-linear-gradient(left, rgba(226, 228, 231, 0), rgba(226, 228, 231, 1), rgba(226, 228, 231, 0));
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="addRow-dialog" title="New Field">
  <form>
    <fieldset>
      <label for="addRow-fieldName">
					Field name</label>
      <input type="text" id="addRow-fieldName" value="" class="text ui-widget-content ui-corner-all" />
      <label for="addRow-fieldType">
					Field type</label>
      <select id="addRow-fieldType">
        <option>NUMBER</option>
        <option>CHAR(32)</option>
        <option>DATE</option>
        <option>VARCHAR</option>
        <option>BLOB</option>
      </select>
    </fieldset>
  </form>
</div>