Question

I have one drop down list in my page, which contains two options. What i want is, when user select second value in drop down list, another page should load. that means how to switch page on clicking on of the drop down box values. for help i am putting my html code of drop down list.

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

现在当用户点击源选项时, 其它js 页面应该打开。以及我应该如何在. js 文件( Jquery) 中为此写入编码。

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

Here _loadTargetList and _loadSourceList both are the functions which will provide the location to load their html file or js files. Here is an example how to load html or js file If you want to call js first then html through js then go for this one

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

希望这能帮上忙

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

见“http://jsfiddle.net/7DxJC/8” rel=“no follow” > this jsfidle 。请注意,它可能不会在 Jsfidle 工作,因为它在一框架中运行代码。您可以测试它 < a href=> http://fiddle.jshell.net/7DxJC/8show/" rel=“no follow” >这里

Answer 3

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

Answer 4

@PenchoIlchev的解决方案是有效的, 但如果您不想使用绑定方法, you可以尝试:

 <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/" rel="nown" >http://jsfiddle.net/FKJFC/

友情链接