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

我想在我的页面上选择2个选项之一时显示div。这里是选择菜单：如果在jQuery中选择了选项，则显示div div

<select id="graph_select"> 
<option id="pilot_form">Pilot Hours</option> 
<option id="client_form">Client Hours</option> 
</select>

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

<div id="pilot_graph_form" align="center" style="margin:0 auto; display:none;"> 
     <form action="?page=reporter" method="POST" name="graph_form"> 
      <p>From:</p> 
      <select name="start_date"> 
       <cfloop query="date_worked_menu"> 
        <option>#date_worked_menu.date_worked#</option> 
       </cfloop> 
      </select> 
      <br /> 
      <br /> 
      <p>To:</p> 
      <select name="end_date"> 
       <cfloop query="date_worked_menu"> 
        <option>#date_worked_menu.date_worked#</option> 
       </cfloop> 
      </select> 
      <br /> 
      <input class="btn btn-success" type="Submit" name="submit_to_graph" value="Submit" id="submit_to_graph"> 
     </form> 
    </div>

这里是我的第二个选项股利：

<div id="client_graph_form" align="center" style="margin:0 auto; display:none;"> 
     <form action="?page=reporter" method="POST" name="graph_form_clients"> 
      <p>From:</p> 
      <select name="client"> 
       <cfloop query="client_menu"> 
        <option value="#client_menu.id#">#client_menu.name#</option> 
       </cfloop> 
      </select> 
      <input class="btn btn-success" type="Submit" name="submit_to_graph" value="Submit" id="submit_to_graph"> 
     </form> 
    </div>

这里是我的jQuery功能我目前为止：

<script type="text/javascript"> 
$(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"}); 
     } 
    }); 
}); 
</script>

来源

2013-01-14 Christoph Riesterer

那么，什么是你的问题是什么呢？ – Swordfish0321

听onchange。 –

现在正确格式化。没有必要为此失眠 –

首先，你应该改变你的 “选项” 到 “价值”， “ID”。

然后你可以使用这个：

$(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(); 
    } 
    }); 
});

来源

2013-01-14 20:01:11 Bror

这工作得很好！谢谢：） –

改变时选择框，你可以淡入元素要：

$('#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名称：

<select id="graph_select"> 
    <option class="pilot_graph_form">Pilot Hours</option> 
    <option class="client_graph_form">Client Hours</option> 
</select>

添加同一类各<div>

<div id="client_graph_form" class="forms" 
... 
<div id="pilot_graph_form" class="forms"

的jQuery：所有的

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

来源

2013-01-14 19:54:34

谢谢大家的贡献。你们都帮了大忙！ :) –

$(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

来源

2013-01-14 19:58:36 kei

+1演示:) –

谢谢大家的贡献。你们都帮了大忙！ :) @kei +1的演示以及 –

代码是正常的，则可能是装载jQuery的一个问题，我建议你使用

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

来源

2013-01-14 20:02:45

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

回答

相关问题