jQuery UI中的SelectMenu未选择

时间:2018-12-04 20:53:39

标签: javascript jquery user-interface jquery-ui-selectmenu

在旧版本的jquery(及相关文件)上,我遇到一个问题,无论如何,从selectmenu弹出的菜单都会出现在左上角。我将所有文件更新为最新文件,现在解决了第一个问题,但是默认项目没有出现在框中,并且也不会出现任何选定的项目。 'icons'选项也不执行任何操作,但是宽度可以正常工作。控制台中也没有错误。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Make a Reservation</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<link href="jquery-ui.css" rel="stylesheet">
<link href="jquery-ui.structure.css" rel="stylesheet">
<link href="jquery-ui.structure.min.css" rel="stylesheet">
<link href="jquery-ui.theme.css" rel="stylesheet">
<link href="jquery-ui.theme.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<link href="form.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
    $( "#letter" ).selectmenu({
        icons: { button: "ui-icon-circle-triangle-s" },
        width: 55,
        position: { my : "center", at: "center" }
    });
    $( "#datepicker" ).datepicker({
        changeMonth : true,
        changeYear : true,
        minDate: 0,
        maxDate: +2
    });
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
    <header>
        Unit 11 Demonstration
    </header>
    <div class="content">
        <div class="main">
            <h1>I'll figure out what to type here later</h1>
            <form>
              <div>
                <label class="label">Select a date:</label>
                <input type="text" id="datepicker" name="datepicker">
              </div>
              <label class="label">Select a letter:</label>
                <select name="letter" id="letter">
                  <option selected="selected">A</option>
                  <option>B</option>
                  <option>C</option>
                  <option>D</option>
                  <option>F</option>
                </select>
            </form>

此部分代码之后的内容完全无关。我搜索了所有可以找到的解决方案,但没有运气。

0 个答案:

没有答案