如何修复弹出窗口中的<option>列表？ Download


我的jquery弹出窗口有问题。这是解决我的问题的gif： enter image description here

我怎么了？

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

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));
}

任何人都知道如何解决此问题？我的JavaScript真的很烂，我只从网络上复制了该代码-.-

2 个答案:

答案 0 :(得分：2)

这对我有用。花了我一些时间来寻找您正在使用的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>

答案 1 :(得分：1)

尝试：

select
{
   width: 120px;
   z-index:1000;
}



Similar searches