[英]Display a different div based on the combination of two different options
OK, so I am trying to display a different iFrame (in a div) based on the selection of two different options. 好的,因此我尝试根据两个不同选项的选择显示不同的iFrame(以div为单位)。 The first option is BOYS or GIRLS, and the second option is GRADE LEVEL.
第一个选项是BOYS或GIRLS,第二个选项是GRADE LEVEL。 With 1st-12th, that would be 24 total divs.
如果是1-12日,则总共是24个div。
Upon load, I'd want the BOYS option and 12th Grade option chosen and the corresponding div displaying that particular iframe. 加载后,我希望选择BOYS选项和12th Grade选项,并且相应的div显示该特定的iframe。 The following code is merely my attempt to display how I want the sidebar of choices to look.
以下代码仅是我尝试显示我希望选择的侧边栏外观的尝试。 Functionally, I'm not sure if much of it applies.
从功能上讲,我不确定其中大部分内容是否适用。
Thank you for any help you're willing and able to provide. 感谢您愿意提供的帮助。 I've been searching a few hours a day over the past few days with no luck.
在过去的几天里,我每天都在搜索几个小时,没有运气。
<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>
If I understood correctly you want to display a different iframe
url for each radio combination. 如果我理解正确,则希望为每个广播组合显示不同的
iframe
网址。 So that's what I did in this JSFiddle , although abstracted and with less, much less content (you should be able to expand on it). 所以这就是我在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>
It's pretty straight forward, although I think you messed up with the radio's name attribute there. 这很简单,尽管我认为您在那里弄乱了收音机的name属性。 The name is what defines the group of radious together, naming a radio: "radio" would be redundant :)
名称是一起定义半径的组的名称,并命名一个半径:“ 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;
}
I'm a little tired (3 am) so I'll make it quick, basicly all the magic happens in the updateIframeSrc()
function, which is called when the page loads, and then every time an input radio
changes. 我有点累了(凌晨3点),所以我要使其快速起来,基本上所有的魔术都发生在
updateIframeSrc()
函数中,该函数在页面加载时调用,然后在每次input radio
更改时调用。
First, using css query selectors, we get the gender value
from an input
with name=gender
that is checked
. 首先,使用css查询选择器,我们从
name=gender
的input
获得了checked
的性别value
。
Then, we get the grade value
from an input
with name=grade
that is checked
. 然后,我们从具有
checked
name=grade
的input
获得等级value
。
Since you want a custom url for each combination, I'm afraid it's going to be tedious, and you'll have to use the switch syntax. 由于您希望为每个组合使用一个自定义网址,因此恐怕它会很乏味,并且您将不得不使用switch语法。
To later add a grade, you should append a new case to the corresponding switch: 要稍后添加成绩,您应该在相应的开关后附加一个新的案例:
switch(gender){
(..)
case "girls":
switch(grade){
(..)
case "graduated":
url = "http://graduatedstudents.com";
break;
}
break;
}
And don't forget to add the corresponding html syntax! 并且不要忘记添加相应的html语法!
<input type="radio" name="grade" value="graduated" />Graduated Student<br/>
Hopes this helps! 希望这会有所帮助! I'm going to sleep, see you :)
我要睡觉了,再见:)
updateIframeSrc()
on input radio
change. input radio
更改时调用updateIframeSrc()
。 ( 3:29a.m 31/12/2014 ) iframe src
url for each input radio
combination. input radio
组合分配了自定义iframe src
网址。 ( 3:58a.m 31/12/14 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.