我有以下代码来切换变量DIV:
$('#'+content_id).toggle(option.hasClass(show_class));
我试图通过将选定的值和DIV的名称连接成一个字符串来获取变量ID。要么我没有正确命名变量,要么将变量放在错误的位置。
完整代码如下:
HTML
<select name="select_name" id="select_id" class="select_class" data-inline="true">
<option class="show1" value="1">1</option>
<option class="show2" value="2">2</option>
<option class="show3" value="3">3</option>
<option class="show4" value="4">4</option>
</select>
<div id="content1">Div 1</div>
<div id="content2">Div 2</div>
<div id="content3">Div 3</div>
<div id="content4">Div 4</div>
<div id="testdiv"></div>
<div id="testdiv2"></div>
<div id="testdiv3"></div>
JS
$(function() {
$('#select_id').change(function() {
var option = $(this).find('option:selected');
var OptVal = document.getElementById('select_id').value;
document.getElementById("testdiv").innerHTML = OptVal;
var show_class = "show" + OptVal;
document.getElementById("testdiv2").innerHTML = show_class;
var content_id = "content" + OptVal;
document.getElementById("testdiv3").innerHTML = content_id;
$('#'+content_id).toggle(option.hasClass(show_class));
}).change();
});
答案 0 :(得分:1)
我猜你只想在下拉列表中显示所选选项的div。
这是你的html:
<select name="select_name" id="select_id" class="select_class" data-inline="true">
<option class="show1" value="1">1</option>
<option class="show2" value="2">2</option>
<option class="show3" value="3">3</option>
<option class="show4" value="4">4</option>
</select>
<div id="content1" class="content">Div 1</div>
<div id="content2" class="content">Div 2</div>
<div id="content3" class="content">Div 3</div>
<div id="content4" class="content">Div 4</div>
<div id="testdiv"></div>
<div id="testdiv2"></div>
<div id="testdiv3"></div>
我在div中添加了一个内容类,以便轻松选择所有内容。
JavaScript的:
$(function () {
$('#select_id').change(function () {
var option = $(this).find('option:selected');
var OptVal = document.getElementById('select_id').value;
document.getElementById("testdiv").innerHTML = OptVal;
var show_class = "show" + OptVal;
document.getElementById("testdiv2").innerHTML = show_class;
var content_id = "content" + OptVal;
document.getElementById("testdiv3").innerHTML = content_id;
$('.content').hide();
$('#' + content_id).show();
}).change();
});
我添加了$('.content').hide();
来隐藏所有div,然后我使用$('#' + content_id).show();
来显示所选的div。
这是一个有效的小提琴:http://jsfiddle.net/JYbq2/