使用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();
});

有用。 小提琴

问题是我还要再添加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>