Div 根据菜单而变化<select>

我正在尝试做类似的事情：http://jsfiddle.net/JSyLV/1/

但我不能让代码在dreamweaver中工作，仅仅通过复制和粘贴。

我使用和将javascript代码放在我的头中

并直接将html复制到我的身体中，但所有的div都显示了，它没有将javascript应用到下拉菜单中。我是否错误地实现了javascript代码？

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
<script>
$(document).ready(function () {
    $('.group').hide();
    $('#option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});
</script>
</head>

<body>
<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
    <select id="selectMe">
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
        <option value="option4">option4</option>
    </select>
    </body>
</html>

您很可能将JQuery错误地加载到了dreamweaver项目中。快速修复方法是在第一个脚本标记之前将其添加到标头中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

这导致：http://pastebin.com/gtLyVcU2

这将起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
    $('.group').hide();
    $('#'+$(this).val()).show();
})
});
}); 
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 2</title>

</head>
<body>
<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>

</body>
</html>

相关内容

最新更新

热门标签：