2

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

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

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

4

4 回答 4

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>​

看到这个 jsfiddle。请注意，它可能在 JSfiddle 中不起作用，因为它在 iframe 中运行代码。你可以在这里测试

于 2012-05-24T14:15:31.547 回答
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.

希望这可以帮助。

于 2012-07-04T12:24:22.680 回答
0 
$("#viewList").change(function() {
   if ($(this).find(':selected').text() == 'Source')
      window.location = 'urltogoto';
});
于 2012-05-24T14:10:34.403 回答
0

@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/

于 2012-05-24T14:20:08.150 回答