Display-div-wenn die option ausgewählt ist, wird in jQuery
Ich versuche zur Darstellung eines div-wenn man von 2 Optionen ausgewählt ist auf meiner Seite. Hier ist das select-Menü:
<select id="graph_select">
<option id="pilot_form">Pilot Hours</option>
<option id="client_form">Client Hours</option>
</select>
Hier ist meine erste div-Tag für die erste option:
<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>
Hier ist der div für meine zweite option:
<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>
Und hier ist meine jQuery-Funktion habe ich bisher:
<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>
- Also, was ist Ihre Frage genau?
- Hören für onchange.
- Richtig formatiert jetzt. Keine Notwendigkeit zu verlieren Schlaf über Sie
Du musst angemeldet sein, um einen Kommentar abzugeben.
Erste von allen, sollten Sie ändern, "id" auf Ihrem "option" "Wert".
Dann können Sie dieses verwenden:
beim ändern der select-box können Sie fadeIn Elemente, die Sie möchten :
Aktualisiert
in anderer Weise :
es wird besser sein, wenn Sie mit demselben Namen mit div ' s id-Namen in den Optionen :
add gleichen Klasse zu jedem
<div>
jQuery :
Code ist in Ordnung, könnte es ein problem mit dem laden von jquery, ich würde vorschlagen, Sie verwenden