javascript - Div 根据 <select> 菜单改变

标签 javascript select menu

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

但我无法让该代码在 Dreamweaver 中运行,仅通过复制和粘贴即可。

我使用和将 javascript 代码放在标题中

并直接将 html 复制到我的 body ,但所有 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

关于javascript - Div 根据 <select> 菜单改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12398063/

相关文章:

mysql - 在 LIKE-TREE 表中查询

javascript - 如何根据该容器中类父元素的数量将不同的 id 赋予子元素

javascript - 如何让 super 代理返回 promise

sql - T-SQL 按条件对数据进行分组

php - 如何使用 PHP、JS 和 HTML 正确处理多对多关系?

SQL Union 显示错误结果

php - wordpress 菜单中缺少菜单项 ID

Javascript鼠标位置

javascript - 如何传递在 jQuery 数据表中选中复选框的行列的值

javascript - 在 Nativescript 中从外部源加载图像