Question

我的页面中有一个下拉列表，其中包含两个选项。我想要的是，当用户在下拉列表中选择第二个值时，应加载另一个页面。这意味着如何在点击下拉框值时切换页面。求助我将我的html代码放在下拉列表中。

        <select id = "viewList" class="fl width160">
            <option>Target</option>
            <option>Source</option>
        </select>

所以现在当用户点击源选项时，应该打开另一个js页面。我应该如何在.js文件（Jquery）中编写代码。

Answer 1

这是代码：

  <select id ="viewList" class="fl width160">
      <option value="" selected>Please select</option>
      <option value="http://www.google.com">Google</option>
      <option value="http://www.yahoo.com">Yahoo</option>
  </select>
<script type="text/javascript">
$(function(){$('#viewList').bind('change', function(){if($(this).val()) window.location=$(this).val();});});
</script>

见this jsfiddle。请注意，它可能无法在JSfiddle中工作，因为它在iframe中运行代码。您可以对其进行测试here

Answer 2

看看你需要像这样更改你的HTML代码

 <select id = "viewList" class="fl width160">
        <option value ="Target">Target</option>
        <option value ="Source">Source</option>
    </select>

$("#viewList").change(function() {
        if( $("#viewList").val =='Target')
    {
        _loadTargetList();
    }
    else
    {
        _loadSourceList();
    }   
});

此处_loadTargetList和_loadSourceList这两个函数都将提供加载其html文件或js文件的位置。这是一个如何加载html或js文件的示例如果你想首先调用js然后通过js调用html，那么就去找一个

codeLoadingMgr.loadInclude( path + '/Target.js', function() {
codeLoadingMgr.getHTML(path + '/Target.html', function(html) {
});
});
Other wise you can direct load the html also.

希望这有帮助。

Answer 3

$("#viewList").change(function() {
   if ($(this).find(':selected').text() == 'Source')
      window.location = 'urltogoto';
});

Answer 4

来自@PenchoIlchev的解决方案有效，但如果您不想使用绑定方法，哟可以尝试：

 <select id = "viewList" class="fl width160" onchange="change();">
        <option>Target</option>
        <option>Source</option>
    </select>

function change(){
    url = $("#viewList option:selected").html();
    location.href = url;
}

http://jsfiddle.net/FKjFC/

Jquery：要在下拉列表中从一个页面切换到另一个页面，请单击

4 个答案: