如果在jQuery中选择了选项，则显示div

我正在尝试显示div，如果在我的页面上选择了2个选项之一。 这是选择菜单：

 Pilot Hours Client Hours  

这是我第一个选择的第一个div：

 
 
 
From:
   #date_worked_menu.date_worked#   
 
 
To:
   #date_worked_menu.date_worked#   
  
  

这是我的第二个选项的div：

 
 
 
From:
   #client_menu.name#    
  

这是我到目前为止的jQuery函数：

  $(function() { $("#graph_select").change(function() { if($("#pilot_form").is(":selected")) { $("#pilot_graph_form").css({"display":"block"}); } else { $("#pilot_graph_form").css({"display":"none"}); } if($("#client_form").is(":selected")) { $("#client_graph_form").css({"display":"block"}); } else { $("#client_graph_form").css({"display":"none"}); } }); });  

Answer 1

首先，您应该将“选项”上的“id”更改为“value”。

然后你可以使用这个：

 $(function () { $("#graph_select").change(function() { var val = $(this).val(); if(val === "pilot_graph_form") { $("#pilot_graph_form").show(); $("#client_graph_form").hide(): } else if(val === "client_form") { $("#client_graph_form").show(); $("#pilot_graph_form").hide(); } }); }); 

Answer 2

 $(function() { $("#graph_select").change(function() { if ($("#pilot_form").is(":selected")) { $("#pilot_graph_form").show(); $("#client_graph_form").hide(); } else { $("#pilot_graph_form").hide(); $("#client_graph_form").show(); } }).trigger('change'); }); 

DEMO

Answer 3

更改选择框时，您可以淡出所需的元素：

 $('#graph_select').change(function(){ var divID = $(this).children('option:selected').attr('id'); if(divID == 'pilot_form'){ $('#client_graph_form').fadeOut(1000,function(){ $('#pilot_graph_form').fadeIn(500); }); }else{ $('#pilot_graph_form').fadeOut(1000,function(){ $('#client_graph_form').fadeIn(500); }); } }); 

更新
换句话说：如果你在选项中使用与div的id名称相同的名称会更好：

  Pilot Hours Client Hours  

为每个

添加相同的类

jQuery：

 $('#graph_select').change(function(){ var divID = $(this).children('option:selected').attr('class'); $('.forms').fadeOut(1000,function(){ $('#'+divID).fadeIn(500); }); }); 

Answer 4

代码没问题，加载jquery可能有问题，我建议你使用

  $(window).load(function(){ //Code });