Semantic-ui dropdown is not working

问题

I have a trouble integrating a dropdown menu in my HTML form. I've tried everything I can do and what I found online but it still doesn't work. I found that this code runs properly on JSFiddle. The script paths are fine and the scripts are loaded correctly.

Did I miss something?

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

回答1:

Try putting

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

right before the closing </body> tag. You're running the dropdown script before these elements $('.ui.dropdown') even exist in the DOM so there's nothing to attach to.

回答2:

Try writing it like this:

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

Your script is on top of the body tag, so you have to check if the DOM is ready. ready() function will check if the DOM is ready first and then run the script.

回答3:

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.

来源：https://stackoverflow.com/questions/25529467/semantic-ui-dropdown-is-not-working

标签

jquery

html

semantic-ui