javascripthtmlhtml-selectscroller

How to use html option tag and check which option is selected?

I am trying to add a scroller feature to my website. The tag works well for this and I want to load a new website if an option is selected. Heres what I currently have.

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

Right now nothing visibly happens when go is clicked. I would like a redirect to those pages. I know that window.location.replace(Your URL Here) works. Can someone help me with the javascript?

Solution

  • Well! as far as i understood your question. If you want to redirect your client on option clicking then this might be helpfull

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

    In Script as:

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