使用 Jquery 从下拉列表中显示链接的更简单方法

Question

这是我第一次尝试 JQuery，我正在使用来自 http://www.timeanddate.com 的嵌入式 iframe 构建世界时钟 - 概念是用户从下拉列表中选择城市，它将显示该城市的正确时间

<div>
        <select>
<option value="n136" selected>London</option>
<option value="n240">Sydney</option>
<option value="n179">New York City</option>
        </select>
</div>
<div class ="n136 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n240 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n240/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>
<div class ="n179 time"><iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n179/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" frameborder="0" width="80" height="38" allowTransparency="true"></iframe></div>

jQuery

$(document).ready(function() {
  $("select").change(function() {
    $(this).find("option:selected").each(function() {
      if ($(this).attr("value") == "n136") {
        $(".time").not(".n136").hide();
        $(".n136").show();
      } else if ($(this).attr("value") == "n240") {
        $(".time").not(".n240").hide();
        $(".n240").show();
      } else if ($(this).attr("value") == "n179") {
        $(".time").not(".n179").hide();
        $(".n179").show();
      } else {
        $(".time").hide();
      }
    });
  }).change();
});

它有效。 FIDDLE

问题是我还有 10 个世界时间要添加，这将成为一个非常大的脚本，将加载 13 个世界时间，隐藏 12 个，这似乎是非常糟糕的做法，我认为如果只有一个 IFrame，它可以大大改进已加载，然后当用户从下拉列表中选择一个城市时，Iframe 的 URL 的值更改部分（好像 n*** 数字是一个变量）到 div 类，因为它们中的每一个都是每个的正确代码城市。这样会更有效率。

然而，我似乎已经达到了 JQuery 的极限，如果有人可以帮助我，甚至让我开始，我将不胜感激。

Answer 1

在选择器中使用关键字this 并更改一个 iframe 的 src：

HTML：

<div>
    <select>
        <option value="n136" selected>London</option>
        <option value="n240">Sydney</option>
        <option value="n179">New York City</option>
    </select>
</div>
<div class="n136 time">
    <iframe src="https://freesecure.timeanddate.com/clock/i50ppgou/n136/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1" id="timeDisplay" frameborder="0" width="80" height="38" allowTransparency="true"></iframe>
</div>

JS：

$(document).ready(function() {
    $("select").change(function() {
        $("#timeDisplay")[0].src = "https://freesecure.timeanddate.com/clock/i50ppgou/" + $(this).attr("value") + "/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1";
    }).change();
});

小提琴：http://jsfiddle.net/p8ARq/610/

Answer 2

试试这个。整个想法是根据从下拉列表中附加选定的值来更改iframe 标签的 src 属性。

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

工作示例：http://jsfiddle.net/DinoMyte/p8ARq/612/

Answer 3

做这样的事情

==HTML==

<div>
<select>
<option value="n136" selected>London</option>
<option value="n240" >Sydney</option>
<option value="n179">New York City</option>
</select>
</div>
<iframe id="AllTime" src="" frameborder="0" width="80" height="38" allowTransparency="true"></iframe>

==JS==

 <script>  
    var f=$("iframe#AllTime"),s=$("select"), k=s.find("option:selected").val();
    //When Zone Change Do this
    s.change(function() {
         var n=$(this).val();   
         f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+n+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");
       });
    //At first Do this
     f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+k+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");
      </script>

==另一种 JS 方法==

<script> 
var f=$("iframe#AllTime"),s=$("select"), k=s.find("option:selected").val();
//When Zone Change Do this
function ChangeTimeZone(t){
f.attr("src","https://freesecure.timeanddate.com/clock/i50ppgou/"+t+"/tluk/fcf90/tct/pct/ftb/bo2/pa10/th1");    
}
//User change time zone
s.change(function() {
     var n=$(this).val();
      ChangeTimeZone(n);    
       });
//At first Do this
 ChangeTimeZone(k);
  </script>