Question

现在，我正在尝试根据选择的内容更改iframe src值。我有多个选择/ iframe，所以我需要一些东西适用于所有实例。

<div class="wrap">
    <select class="changer">
        <option value="http://stackoverflow.com">StackOverflow</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.com">Yahoo</option>
        <option value="http://twitter.com">Twitter.com</option>
    </select>
    <iframe src="http://stackoverflow.com"></iframe>
</div>
<div class="wrap">
    <select class="changer">
        <option value="http://stackoverflow.com">StackOverflow</option>
        <option value="http://google.com">Google</option>
        <option value="http://yahoo.com">Yahoo</option>
        <option value="http://twitter.com">Twitter.com</option>
    </select>
    <iframe src="http://stackoverflow.com"></iframe>
</div>

CSS：

.wrap {
    width:50%;
    float:left;
}
iframe {
    width:100%;
    height:500px;
display:block;
}

jQuery的：

$('.changer').change(function () {
    $(this).attr('src', this.value);
});

Answer 1

您正在更改src元素的select属性，而不是iframe元素。

鉴于HTML，您可以使用.next('iframe')来更改相邻iframe元素的来源。

EXAMPLE HERE

$('.changer').change(function () {
    $(this).next('iframe').attr('src', this.value);
});

Answer 2

试试这个：

$('.changer').change(function () {
    $(this).next().attr('src', this.value);
});

jQuery - 根据选择值更改iframe src

2 个答案: