答案＆amp;演示

Question

好的，所以我试图根据两个不同选项的选择显示不同的iFrame（在div中）。第一个选项是BOYS或GIRLS，第二个选项是GRADE LEVEL。在1至12日，这将是24总div。

加载后，我想要选择BOYS选项和12th Grade选项以及显示该特定iframe的相应div。以下代码仅仅是我试图展示我希望侧边栏选择的样子。从功能上讲，我不确定它是否适用。

感谢您愿意并且能够提供的任何帮助。过去几天我一天都在搜索几个小时而没有运气。

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

Answer 1

答案＆amp;演示

如果我理解正确，您希望为每个无线电组合显示不同的iframe网址。这就是我在JSFiddle中所做的，虽然是抽象的，内容更少，更少（你应该可以扩展它）。

HTML

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

虽然我认为你搞砸了广播电台的名字属性，但它很直接。这个名字就是将一群人放在一起，命名一个无线电：＆＃34; radio＆＃34;会多余的：）

的JavaScript

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查询选择器，我们从value获得input name=gender checked的性别value。

然后，我们从input获得name=grade checked，switch(gender){ (..) case "girls": switch(grade){ (..) case "graduated": url = "http://graduatedstudents.com"; break; } break; } <input type="radio" name="grade" value="graduated" />Graduated Student<br/>。

由于您需要为每个组合添加自定义网址，因此我担心它会变得乏味，并且您必须使用切换语法。

要稍后添加成绩，您应该将新案例附加到相应的开关：

updateIframeSrc()

并且不要忘记添加相应的html语法！

input radio

希望这会有所帮助！我要睡觉了，见到你:)。

更新

更新了代码，以便在iframe src更改时致电input radio。（ 3:29 am.m 31/12/2014 ）
更新了代码，为每个{{1}}组合分配了自定义{{1}}网址。（ 3:58 am.m 31/12/14 ）

根据两个不同选项的组合显示不同的div

1 个答案:

答案＆amp;演示

HTML

的JavaScript

说明

更新