Question

我想我已经陷入困境，我希望在一个页面上显示3个相同的下拉列表，这些下拉列表在不同的城市显示时钟（因此用户可以在任何时间查看多个时钟）但是当我更新时一个时钟字段更新其他2个下拉列表，我认为这将与

有关

$（ “选择”）

因为没有什么可以区分3个下拉菜单，但我无法解决这个问题。有人可以帮忙吗？

HTML

<div id="London">
  <select>
    <option value="n136">London</option>
    <option value="n240">Sydney</option>
    <option value="n179">New York City</option>
  </select>
</div>
<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 id="Sydney">
  <select>
    <option value="n240">Sydney</option>
    <option value="n136">London</option>
    <option value="n179">New York City</option>
  </select>
</div>
<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 id="NewYork">
  <select>
    <option value="n179">New York City</option>
    <option value="n136">London</option>
    <option value="n240">Sydney</option>
  </select>
</div>
<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>

的jQuery

$(document).ready(function() {
  $("select").change(function() {
    var value = $(this).val();
    $('iframe').attr("src", "https://freesecure.timeanddate.com/clock/i50r05un/" + value + "/tluk/fs20/tct/pct/ftb/th")
  });
});

FIDDLE

Answer 1

正确的代码：

$(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。

Answer 2

不是iframes。您正在更新下拉更改中的所有3 data-id。

将select属性分配给iframe并向iframe提供相同的ID，然后从数据属性中获取<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> id并更改其src。

HTML：

$(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")
  });
});

JS：

<!--
<pagespeed>
    <url-blacklist>http://*/sistema/*</url-blacklist>
    <enabled-rewriter>MinifyCss</enabled-rewriter>
    ...
    ...
</pagespeed>
-->

更新fiddle

Answer 3

您必须在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>

jQuery文件

$(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");
  });
});

在一个页面jQuery HTML上有3个相同的下拉列表

3 个答案: