带有下拉菜单以显示div的Javascript

Question

有人可以看一下我的代码，什么东西不起作用，这是我基于某些教程的第一个Java，但由于某种原因不起作用，我将其放在php文件中并上传到我的服务器，然后我不再工作了。 我在JSFddle中检查了它，它正在工作。

<head>  
 <style type="text/css">
.div1 {color: red; display:none}
.div2 {color: blue; display:none}
.div3 {color: red; display:none}
.div4 {color: blue; display:none}
.div5 {color: red; display:none}
</style>  

<script type"text/javascript" src="//http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type"text/javascript">
$("#cities").change(function(){
  var value = this.value;
  if (value == "1"){
    $(".div1").show();
    $(".div2").hide();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
  }else if (value == "2"){
    $(".div1").hide();
    $(".div2").show();
    $(".div3").hide();
    $(".div4").hide();
    $(".div5").hide();
  }else if (value == "3"){
    $(".div1").hide();
    $(".div2").hide();
    $(".div3").show();
    $(".div4").hide();
    $(".div5").hide();
  }      
});
</script>
<title></title>
</head>
<body>
<select class="cities" id="cities" name="project_procurement_management_plan[items_attributes][0][category_id]">
<option value="">select one</option>
<option value="1">this is 1</option>
<option value="2">this is 2</option>
<option value="3">this is 3</option>
</select>
<hr>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>

多谢你们

Answer 1

您的脚本类型标签有问题，请更改

<script type"text/javascript">

至

<script type="text/javascript">

并将整个.change()代码放入DOM ready处理程序中，例如

$(document).ready(function() {
   $("#cities").change(function(){
      //rest of your code
   });
});

并在开始时也从jQuery URL中删除//

Answer 2

更改此行：

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

对此：

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

开头有两个不必要的正斜杠。

带有下拉菜单以显示div的Javascript

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-11-08 02:51:59

解决方案2
1 2013-11-08 02:52:37

带有下拉菜单以显示div的Javascript

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-11-08 02:51:59

解决方案2 1 2013-11-08 02:52:37

解决方案1
1 已采纳 2013-11-08 02:51:59

解决方案2
1 2013-11-08 02:52:37