Question

我想根据下拉列表中的选项加载不同的iframe。我不想使用任何“GO”按钮，在从下拉列表中选择选项后，它会打开一个与特定选择相对应的特定iframe。我在没有iframe的情况下做了这件事，但是通过“隐藏”不必要的内容，然而页面变得庞大并且加载速度非常慢。这是html：

<select id="selector">
    <option value="opt0"  id="opt0">select movie</option>
    <option value="opt1"  id="opt1">movie 2</option>
    <option value="opt2"  id="opt2">movie 3</option>
    <option value="opt3"  id="opt3">movie 4</option>
</select>

我真的很想使用jquery，因为我对php并不熟悉。在所选内容下方将有一个特定的iframe，对于每个下拉列表中的选项都不同。谢谢你的帮助

Answer 1

由于您已使用jQuery标记了此问题，我认为使用jQuery使代码更简单会更好。您已拥有id个<select>标记。从id代码中移除<option>，并使用value属性的网址。

<select id="selector">
    <option value="0">select movie</option>
    <option value="./movie2">movie 2</option>
    <option value="./movie3">movie 3</option>
    <option value="./movie4">movie 4</option>
</select>

以这种方式将onchange事件绑定到<select>标记：

$(document).ready(function(){
    $("#selector").change(function(){
        $("#iframeId").attr("src", $(this).val());
    });
});

现在，当您更改<select>代码的值时，iframe中的内容会根据<option>的值中的网址进行更改。

从下拉列表中加载不同的iframe

1 个答案:

小提琴：http://jsfiddle.net/praveenscience/292wF/