Menu
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>
304
A dropdown menu can appear to be floating below an element. A simple dropdown can open without Javascript. A dropdown menu can contain a header. Dropdown state is not fully managed when using the subcomponent API.
For example, you can set your dropdown not to change its text, or select a value from its menu. Initializing a dropdown with pre-existing HTML allows for greater performance than initializing a dropdown directly on a select element.
A dropdown can take the full width of its parent. A dropdown menu or sub-menu can specify the direction it should open. The example below shows (roughly) the desired markup but is not functional since we don't currently support nested dropdowns.
A disabled dropdown item does not allow user interaction. A dropdown can have its menu scroll. Dropdown state is not fully managed when using the subcomponent API. The shorthand props API fully manages state but needs to be extended to support the markup shown here. If there's no pull request open for this, you should contribute!
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.
131
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
