![](/img/trans.png)
[英]displaying different form options based on the combination of previous input values
[英]Display a different div based on the combination of two different options
好的,因此我嘗試根據兩個不同選項的選擇顯示不同的iFrame(以div為單位)。 第一個選項是BOYS或GIRLS,第二個選項是GRADE LEVEL。 如果是1-12日,則總共是24個div。
加載后,我希望選擇BOYS選項和12th Grade選項,並且相應的div顯示該特定的iframe。 以下代碼僅是我嘗試顯示我希望選擇的側邊欄外觀的嘗試。 從功能上講,我不確定其中大部分內容是否適用。
感謝您願意提供的幫助。 在過去的幾天里,我每天都在搜索幾個小時,沒有運氣。
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
<script>
$(function() {
$( "#radiox" ).buttonset();
});
</script>
<style>
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
.radioA label [
width:250px;
]
</style>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" checked="checked"><label for="radio1" style="width:100px;">BOYS</label>
<input type="radio" id="radio2" name="radio"><label for="radio2" style="width:100px;">GIRLS</label>
</div>
</form>
<br>
<form>
<div id="radiox">
<input type="radio" id="radioA" name="radio" checked="checked"><label for="radioA" style="width:100px;">12th Grade</label>
<input type="radio" id="radioB" name="radio"><label for="radioB" style="width:100px;">11th Grade</label><br>
<input type="radio" id="radioC" name="radio"><label for="radioC" style="width:100px;">10th Grade</label>
<input type="radio" id="radioD" name="radio"><label for="radioD" style="width:100px;">9th Grade</label><br>
<input type="radio" id="radioE" name="radio"><label for="radioE" style="width:100px;">8th Grade</label>
<input type="radio" id="radioF" name="radio"><label for="radioF" style="width:100px;">7th Grade</label><br>
<input type="radio" id="radioG" name="radio"><label for="radioG" style="width:100px;">6th Grade</label>
<input type="radio" id="radioH" name="radio"><label for="radioH" style="width:100px;">5th Grade</label><br>
<input type="radio" id="radioI" name="radio"><label for="radioI" style="width:100px;">4th Grade</label>
<input type="radio" id="radioJ" name="radio"><label for="radioJ" style="width:100px;">3rd Grade</label><br>
<input type="radio" id="radioK" name="radio"><label for="radioK" style="width:100px;">2nd Grade</label>
<input type="radio" id="radioL" name="radio"><label for="radioL" style="width:100px;">1st Grade</label><br>
<input type="radio" id="radioM" name="radio"><label for="radioM" style="width:100px;">7 Year Olds</label>
<input type="radio" id="radioN" name="radio"><label for="radioN" style="width:100px;">6 Year Olds</label><br>
<input type="radio" id="radioO" name="radio"><label for="radioO" style="width:100px;">5 Year Olds</label>
<input type="radio" id="radioP" name="radio"><label for="radioP" style="width:100px;">4 Year Olds</label><br>
</div>
</form>
如果我理解正確,則希望為每個廣播組合顯示不同的iframe
網址。 所以這就是我在JSFiddle中所做的 ,盡管是抽象的,但內容卻越來越少(您應該可以對其進行擴展)。
<form>
<h1>Gender:</h1>
<input type="radio" name="gender" value="boys" checked/>Boys<br/>
<input type="radio" name="gender" value="girls"/>Girls<br/>
<h1>Grades:</h1>
<input type="radio" name="grade" value="1" checked/>1st Grade<br/>
<input type="radio" name="grade" value="2" />2nd Grade<br/>
<input type="radio" name="grade" value="3" />3rd Grade<br/>
</form>
<br>
<div>
<iframe id="iframe"></iframe>
</div>
這很簡單,盡管我認為您在那里弄亂了收音機的name屬性。 名稱是一起定義半徑的組的名稱,並命名一個半徑:“ radio”將是多余的:)
window.onload = init;
function init(){
iframe = document.querySelector("#iframe");
radios = document.querySelectorAll("input[type=radio]");
for( var i = 0 ; i < radios.length ; i ++ ){
var radio = radios[i];
radio.onchange = updateIframeSrc;
}
updateIframeSrc();
}
function updateIframeSrc(){
var gender = document.querySelector("input[name=gender]:checked").value;
var grade = document.querySelector("input[name=grade]:checked").value;
var url;
switch(gender){
case "boys":
switch(grade){
case "1":
url = "http://www.boysgrade1.com";
break;
case "2":
url = "http://www.boysgrade2.com";
break;
case "3":
url = "http://www.boysgrade3.com";
break;
}
break;
case "girls":
switch(grade){
case "1":
url = "http://www.girlsgrade1.com";
break;
case "2":
url = "http://www.girlsgrade2.com";
break;
case "3":
url = "http://www.girlsgrade3.com";
break;
}
break;
}
iframe.src = url;
}
我有點累了(凌晨3點),所以我要使其快速起來,基本上所有的魔術都發生在updateIframeSrc()
函數中,該函數在頁面加載時調用,然后在每次input radio
更改時調用。
首先,使用css查詢選擇器,我們從name=gender
的input
獲得了checked
的性別value
。
然后,我們從具有checked
name=grade
的input
獲得等級value
。
由於您希望為每個組合使用一個自定義網址,因此恐怕它會很乏味,並且您將不得不使用switch語法。
要稍后添加成績,您應該在相應的開關后附加一個新的案例:
switch(gender){
(..)
case "girls":
switch(grade){
(..)
case "graduated":
url = "http://graduatedstudents.com";
break;
}
break;
}
並且不要忘記添加相應的html語法!
<input type="radio" name="grade" value="graduated" />Graduated Student<br/>
希望這會有所幫助! 我要睡覺了,再見:)
input radio
更改時調用updateIframeSrc()
。 ( 2014年12月31日上午3:29 ) input radio
組合分配了自定義iframe src
網址。 ( 3:58 a.m 31/12/14 )
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.