Question

我正在尝试向我的网站添加滚动功能。标签适用于此，如果选择了一个选项，我想加载一个新网站。这是我现在拥有的东西。

<body>
<script type="text/javascript">
    $('document').ready(function(){
                        $('#button').click(function(){
                                var val = document.getElementById("scroll");
                                                       if(val.options[val.selectedIndex].value == 1){
                                                       window.location.replace("/passbook.html");
                                                       }else if(val.options[val.selectedIndex].value == 2){
                                                       window.location.replace("/settings.html");
                                                       }
                                                       });
                                           });
                        });
    </script>

<select id="scroll" style="height:50px; width:150px;" >
<optgroup label="Home">
<option value="0" >Home</option>
</optgroup>
<optgroup label="Page" >
<option value="1" >Page</option>
</optgroup>
<optgroup label="Other" >
<option value="2" >Settings</option>
</optgroup>
</select>
<button type="button">Go</button>
</body>

现在点击go时没有明显的事情发生。我想重定向到那些页面。我知道window.location.replace（你的URL在这里）有效。有人可以用javascript帮助我吗？

Answer 1

嘛！据我了解你的问题。如果您想在选项单击时重定向客户端，那么这可能会有所帮助

   <select id="opts" onchange="GotoPage()">
        <option value="0">SELECT</option>
        <option value="index.html">Home</option>
        <option value="page.html">Page</option>
        <option value="setting.html">Setting</option>
        <option value="go.html">Go</option>
    </select>

在剧本中：

<script type="text/javascript">
function GotoPage()
{
   var loc = document.getElementById('opts').value;
   if(loc!="0")
   window.location = loc;
}
</script>

Answer 2

添加name="scroll"以选择标记

按var val = $('select[name="scroll"] option:selected').text();

获取选项的值

<body>
    <select id="scroll" name="scroll" style="height:50px; width:150px;" >
    <optgroup label="Home">
    <option value="0" >Home</option>
    </optgroup>
    <optgroup label="Page" >
    <option value="1" >Page</option>
    </optgroup>
    <optgroup label="Other" >
    <option value="2" >Settings</option>
    </optgroup>
    </select>
    <button type="button">Go</button>
    </body>

JS

<script type="text/javascript">
    $('document').ready(function(){
                        $('#button').click(function(){
                                var val = $('select[name="scroll"] option:selected').text();
                                                       if(val == 1){
                                                       window.location.replace("/passbook.html");
                                                       }else if(val == 2){
                                                       window.location.replace("/settings.html");
                                                       }
                                                       });
                                           });
                        });
    </script>

如何使用html选项标签并检查选择了哪个选项？

2 个答案: