Jump to content

Custom select


Bryan Somto

Recommended Posts

https://www.w3schools.com/howto/howto_custom_select.asp

The link above is a custom select dropdown. I'm trying to get each item in the dropdown go to a link. I've tried using;

<body> 

Please select city : 

<select name="select-city" onchange="location = this.value;"> 

<option value="">Select-City</option> 

 <option value="https://en.wikipedia.org/wiki/New_Delhi">New Delhi</option> 

 <option value="https://en.wikipedia.org/wiki/New_York">New York</option> 

 <option value="https://en.wikipedia.org/wiki/Bern">Bern</option> 

 <option value="https://en.wikipedia.org/wiki/Beijing">Beijing</option> 

</select> 

</body> 

And this,

<select name="formal" onchange="javascript:handleSelect(this)"> 

<option value="home.com">Home</option> 

<option value="https://www.Facebook.com">Contact</option> 

</select> 

 

<script type="text/javascript"> 

function handleSelect(elm) 

window.location = elm.value; 

</script> 

 

Link to comment
Share on other sites

try this:

<form>
<select name="list" id="list" accesskey="target">
    <option value='none' selected>Choose a theme</option>
    <option value="https://en.wikipedia.org/wiki/New_Delhi">New Delhi</option>
    <option value="https://en.wikipedia.org/wiki/Gujarat">Gujarat</option>
    <option value="https://en.wikipedia.org/wiki/New_Delhi">New delhi</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>

and JS file:

 function goToNewPage()
    {
        var url = document.getElementById('list').value;
        if(url != 'none') {
            window.location = url;
        }
    }

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...