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

【问题标题】：Jquery: To switch from one page to another on drop-down list clickJquery：要在下拉列表中从一个页面切换到另一个页面，请单击
【发布时间】：2012-07-04 20:24:22
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery html

【解决方案1】：

你需要像这样改变你的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.

希望这会有所帮助。

【讨论】：

【解决方案2】：

这是代码：

  <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

【讨论】：

我正在寻找这样的答案，但我仍然没有得到它。如果我的源文件位于 c:/etc/source 位置，那么我将如何传递这个位置，我不需要调用另一个函数来加载源页面吗？
c:/etc/source 是本地文件系统位置。您想浏览本地存储的文件吗？包含您的选择选项的页面的网址是什么？
不，c 位置只是随机示例。确切的一个就像 code/app/target 和 code/app/source
@VikasGupta 你能给我包含下拉列表的 html 的文件的位置吗？我需要您浏览器地址栏中显示的位置。
看，我正在为您提供每个文件的确切位置。我在位置 E:\Trans\WebContent\demo\code\app\sc\LoggedIn\sc\Source 的 source.html 文件中进行列表编码，这也是我想要做的 sourceC.js 文件的位置onclick 更改事件的编码。另一个文件 targetC.js 或 target.html 位于 E:\Trans\WebContent\demo\code\app\sc\LoggedIn\sc\target 所以我已经为你提供了所有位置，现在请告诉我如何编码source.js 文件中的 onclick 更改事件

【解决方案3】：

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

【讨论】：

【解决方案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/

【讨论】：