9

在我的 HTML 表单中集成下拉菜单时遇到问题。我已经尝试了我能做的一切以及我在网上找到的东西，但它仍然不起作用。我发现这段代码在 JSFiddle 上运行正常。脚本路径很好，并且脚本已正确加载。

我错过了什么？

<html>
  <head>
      <meta charset="UTF-8">
      <link href="../semantic/packaged/css/semantic.min.css" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="../semantic/packaged/javascript/semantic.min.js"></script>
  <script>
    $('.ui.dropdown').dropdown();
  </script>
  </head>
  <body>
      <form class="ui form segment" style="width:400px; margin:auto;" method="POST" action="register_do.php">
    <div class="field">
      <label>학년</label>
      <div class="ui fluid dropdown selection">
        <input type="hidden" name="grade">
        <div class="default text">학년</div>
        <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item" data-value="10">고1</div>
          <div class="item" data-value="11">고2</div>
          <div class="item" data-value="12">고3</div>
        </div>
      </div>
    </div>
    <div class="ui buttons">
              <button class="ui red submit button">등록</button>
              <div class="or"></div>
              <div class="ui button" onClick="history.back();">취소</div>
          </div>
      </form>
  </body>
</html>
4

3 回答 3

17

试着放

<script>
    $('.ui.dropdown').dropdown();
</script>

就在结束</body>标签之前。在这些元素甚至存在于 DOM 中之前，您正在运行下拉脚本，$('.ui.dropdown')因此没有什么可以附加到的。

于 2014-08-27T14:27:56.610 回答
3

试着这样写：

$(document).ready(function() {
    $('.ui.dropdown').dropdown();
});

您的脚本位于 body 标记之上，因此您必须检查 DOM 是否已准备好。ready() 函数将首先检查 DOM 是否准备就绪，然后运行脚本。

于 2015-06-02T05:24:16.380 回答
0

This error also occurs if you use a custom theme for the menu element under collections in the theme.config but do not provide an actual override file for variables and overrides in your theme folder - even as empty files. There is no js error shown up but the dropdown is not working. Make sure you have either all override files provided or replace only the elements you really want to use from your custom theme in theme.config.

于 2018-02-16T11:05:14.893 回答