Javascript 链接到多个select值的Jquery div
现在我的下拉菜单链接到了div id,但我希望它链接到div类,这样某个div可以显示在多个选择中——可以说是重叠的类别。我不熟悉这个,所以如果有人能帮我,我将不胜感激 以下是我到目前为止的情况:Javascript 链接到多个select值的Jquery div,javascript,jquery,css,html,Javascript,Jquery,Css,Html,现在我的下拉菜单链接到了div id,但我希望它链接到div类,这样某个div可以显示在多个选择中——可以说是重叠的类别。我不熟悉这个,所以如果有人能帮我,我将不胜感激 以下是我到目前为止的情况: <style> .odd{ background-color: #ccc; padding: 15px; } .even{ background-color: #eee; padding: 15px; } </style> <script
<style>
.odd{
background-color: #ccc;
padding: 15px;
}
.even{
background-color: #eee;
padding: 15px;
}
</style>
<script type="text/javascript">
$(function() {
$("select").change(function() {
var id = $("option:selected", this).val();
$("div[id]").each(function() {
$(this).toggle($(this).attr("id") == id);
});
$('.wrapper div:visible:even').css({
'background-color': '#eee'
});
$('.wrapper div:visible:odd').css({
'background-color': '#ccc'
});
});
});
</script>
.奇怪{
背景色:#ccc;
填充:15px;
}
.甚至{
背景色:#eee;
填充:15px;
}
$(函数(){
$(“选择”).change(函数(){
var id=$(“选项:选中”,this).val();
$(“div[id]”)。每个(函数(){
$(this.toggle($(this.attr(“id”)==id);
});
$('.wrapper div:visible:even').css({
“背景色”:“eee”
});
$('.wrapper div:visible:odd').css({
“背景色”:“ccc”
});
});
});
其他部分:
<select>
<option value="">Choose one:</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<div class="wrapper">
<div id="option1" class="odd">content1</div>
<div id="option2" class="even">content2</div>
<div id="option3" class="odd">content3</div>
选择一个:
选择1
选择2
选择3
内容1
内容2
内容3
例如,我希望显示选项1和选项2的内容3。一种方法是使用
hasClass()
JS:
HTML:
内容1
内容2
内容3
谢谢你,这正是关键所在!现在,如果我要包括第二个下拉列表,我将如何使其成为第二个下拉列表依赖于第一个下拉列表选择的位置?一种方法是有多个第二个下拉列表,并让第一个的change
处理程序隐藏和显示相应的下拉列表,类似于它隐藏和显示div的方式。
$(function() {
$("select").change(function() {
var id = $(this).val();
$("div[id]").each(function() {
$(this).toggle($(this).hasClass(id));
});
$('.wrapper div:visible:even').css({
'background-color': '#eee'
});
$('.wrapper div:visible:odd').css({
'background-color': '#ccc'
});
});
});
<div class="wrapper">
<div id="option1" class="odd option1">content1</div>
<div id="option2" class="even option2">content2</div>
<div id="option3" class="odd option1 option2">content3</div>
</div>