[英]Dropdown List with content for each option (<select>,<option>)
我只是尝试制作一个下拉列表。 当我单击一个选项时,我想要为每个选项显示一个特定的内容(文本)。 但是我不知道该怎么做。 这是代码:
<html>
<body>
<form name="dropdown-list">
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</body>
</html>
使用jquery ..为您的选择元素分配ID并使用以下代码
$('#select-id').change(function() {
//piece of code to do when option changes
})
我认为您需要使用Javascript。
我认为这可以解决问题。 我们将隐藏所有其他不需要的块,并且将显示我们唯一需要的块
<html>
<head>
<style>
.yourContentHere {
display: none;
}
.activeContent {
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body>
<form name="dropdown-list">
<select>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<div id="yourDropdownChoiceContent">
<div class="yourContentHere activeContent">This wiil appear if we click dropdown 1</div>
<div class="yourContentHere">This wiil appear if we click dropdown 2</div>
<div class="yourContentHere">This wiil appear if we click dropdown 3</div>
</div>
<script>
$('select').change(function(){
var chosenOption = $('select option:selected').index()
$('.yourContentHere').removeClass('activeContent')
$('.yourContentHere').eq(chosenOption).addClass('activeContent')
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.