如果在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

回答

相關問題