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