Javascript 一页jQuery HTML上有3个相同的下拉列表
我想我已经陷入了困境，我希望在一个页面上有3个相同的下拉列表，显示不同城市的时钟（因此用户可以在任何时间查看多个时钟），但当我更新一个时钟的字段时，它会更新其他2个下拉列表，我想这将与 $（“选择”） 因为这3个下拉列表之间没有区别，但我无法计算出来。有人能帮忙吗 HTML 正确的代码：Javascript 一页jQuery HTML上有3个相同的下拉列表,javascript,jquery,html,Javascript,Jquery,Html,我想我已经陷入了困境，我希望在一个页面上有3个相同的下拉列表，显示不同城市的时钟（因此用户可以在任何时间查看多个时钟），但当我更新一个时钟的字段时，它会更新其他2个下拉列表，我想这将与 $（“选择”） 因为这3个下拉列表之间没有区别，但我无法计算出来。有人能帮忙吗 HTML 正确的代码： $(document).ready(function() { $("select").change(function() { var value = $(this).val(); $(thi
$(document).ready(function() {
$("select").change(function() {
var value = $(this).val();
$(this).parent('div').next('div').children('iframe').attr("src", "https://freesecure.timeanddate.com/clock/i50r05un/" + value + "/tluk/fs20/tct/pct/ftb/th");
});
});
这是相对于$（This）选择iframe，因此您不是针对所有iframe，而是只针对要更改的iframe。这不是关于
下拉列表的问题。在下拉更改时，您正在更新所有3个iFrame
将data id
属性分配给select
并将相同的id分配给iframe，然后从data属性中获取iframe
id并更改其src
html:
更新了您必须对html文件和js文件进行如下更改。它工作起来很顺利。您可以复制粘贴并开始使用。它是根据您的示例定制的。享受吧
<!DOCTYPE html>
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="demo_script_src.js"></script>
</head>
<div id="London">
<select>
<option value="n136">London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n136/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
<div id="Sydney">
<select>
<option value="n240">Sydney</option>
<option value="n136">London</option>
<option value="n179">New York City</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n240/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
<div id="NewYork">
<select>
<option value="n179">New York City</option>
<option value="n136">London</option>
<option value="n240">Sydney</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n179/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
这与下拉无关。您正在按下拉更改更新所有3个iFrame。为什么要添加额外的html？只需在$（this）上使用parent（）、children（）和next（）函数，因为通过ID选择某个对象比遍历DOM更快、更可靠。如果HTML有任何变化，这段代码仍然有效。如果你想在将来修改HTML结构，在这种情况下，你必须根据嵌套的父级更改js。是的，但我假设HTML结构不会改变。最合适的html是将select和iframe放在一个div中，这样iframe就可以用next（）^^@seahorspip选择，我永远不会认为结构不会改变。同样，通过ID选择某些东西比遍历DOM要快。而且，如果结构确实发生了变化，则不需要对javascript进行更改。它只是继续工作。
$(document).ready(function() {
$("select").change(function() {
var value = $(this).val();
$(this).parent('div').next('div').children('iframe').attr("src", "https://freesecure.timeanddate.com/clock/i50r05un/" + value + "/tluk/fs20/tct/pct/ftb/th");
});
});
<div id="London">
<select data-id="London-iframe">
<option value="n136">London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
</select>
</div>
<div>
<iframe id="London-iframe" src="https://freesecure.timeanddate.com/clock/i50r05un/n136/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
<div id="Sydney">
<select data-id="Sydney-iframe">
<option value="n240">Sydney</option>
<option value="n136">London</option>
<option value="n179">New York City</option>
</select>
</div>
<div>
<iframe id="Sydney-iframe" src="https://freesecure.timeanddate.com/clock/i50r05un/n240/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
<div id="NewYork">
<select data-id="NewYork-iframe" >
<option value="n179">New York City</option>
<option value="n136">London</option>
<option value="n240">Sydney</option>
</select>
</div>
<div>
<iframe id="NewYork-iframe" src="https://freesecure.timeanddate.com/clock/i50r05un/n179/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
$(document).ready(function() {
$("select").change(function() {
var value = $(this).val();
$('#' + $(this).data('id')).attr("src", "https://freesecure.timeanddate.com/clock/i50r05un/" + value + "/tluk/fs20/tct/pct/ftb/th")
});
});
<!DOCTYPE html>
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="demo_script_src.js"></script>
</head>
<div id="London">
<select>
<option value="n136">London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n136/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
<div id="Sydney">
<select>
<option value="n240">Sydney</option>
<option value="n136">London</option>
<option value="n179">New York City</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n240/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
<div id="NewYork">
<select>
<option value="n179">New York City</option>
<option value="n136">London</option>
<option value="n240">Sydney</option>
</select>
<div>
<iframe src="https://freesecure.timeanddate.com/clock/i50r05un/n179/tluk/fs20/tct/pct/ftb/th" frameborder="0" width="90" height="38" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$("select").change(function() {
var value = $(this).val();
$(this).parent().find('iframe').attr("src", "https://freesecure.timeanddate.com/clock/i50r05un/" + value + "/tluk/fs20/tct/pct/ftb/th");
});
});