How To Create Custom Select Menus with link to URL - javascript

I have this code: https://www.w3schools.com/howto/howto_custom_select.asp
I just want to add a different URL to each option so it gets opened when clicked.
I've tried so many ways and none of them works. I don't understand Javascript and I think the options I've tried may be in conflict with this ones.
Can anyone help with this issue?
Thank you so much for your time and help.

You have to add value and onchange to option for example:
<select onchange="window.location=this.value">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.bing.com">Bing</option>
</select>

Try "onclick" instead of "value".
<option onclick="window.location='http://www.google.com'">Google</option>

Related

click specific option using javascript or jquery

I tried googling this but I am getting only on event trigger searches instead of what I am looking for.
I want to dynamically click on any of the options in the select dropdown by using the value or the text if possible.
HTML
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
I am not sure if I need to use something with $("#certainspamselectid").click..... but I am not sure what to use after click. I would have tried more things but my google searches keep pinpointing me for on event triggers when I just want to click on one of these options using either JS or jQuery.
I have read your problem and honestly, I can't understand what you want exactly.
However, it looks like you want to select some certain option of the select dropdown.
If that's right, you don't need to call some kind of click function.
You can do it easily with jQuery.
For example, imagine that you are going to select third option - "moved to junk email folder". Then you can select it by code like below.
$("#certainspamselectid").val(1);
If my answer is not enough for you, let me know detail of your problem.
With <select> what you need is .change instead of .click
Here is a quick example .. change the $value and check again
$("#certainspamselectid").on('change' , function(){
console.log("Value Changed To: "+$(this).val());
if($(this).val() == 5){
console.log("value 5 is selected");
}
});
let $value = 4;
$("#certainspamselectid").val($value).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="certainspamselectid" name="certainspamselect" style="margin-left: 165px;">
<option value="0">permanently deleted</option>
<option value="4">moved to admin quarantine</option>
<option value="1">moved to junk email folder</option>
<option value="5">delivered to inbox with tag</option>
<option value="2">delivered to inbox</option>
</select>
why don't you simply change the value of the select like this
$("#certainspamselectid").val(4)
It will automatically show the text from the selected option
I don't think that clicking on an option would help you

Set dropdown value in a Javascript bookmark, my code works with textfields only

At work we had a handy coworker who made a bookmark that auto-filled our ID in textfields on a webpage using javascript that worked wonders. However my company changed the textfields to a dropdown and it no longer works. I've been digging around for a while and I can't seem to find a solution that works. I have very little experience with javascript though. This is what the code was for the textfields:
javascript:{document.getElementById('ID').value=%12345%22;document.getElementById('vendor').value=%2212345%22;void(0)}
I'm guessing the problematic part is the ".value=%" part? Do I need to put something else for a dropdown list?
It could be due to %12345%22 must be between quotations.
javascript:{document.getElementById('ID').value='%12347%22';}
<select id="ID">
<option value="%12346%22">Masoud</option>
<option value="%12347%22">Yoleaux</option>
<option value="%12348%22">Test1</option>
<option value="%12349%22">Test2</option>
</select>
If it is not your actual problem please provide more information.

Change the dropdown value as per page change

<select id="location-search" onChange="window.location.href=this.options[this.selectedIndex].value;"> >
<option value="http://dignitytech.com/efront/contact-us/">Ireland</option>
<option value="http://dignitytech.com/efront/united-kingdom-2/">United Kingdom</option>
<option value="http://dignitytech.com/efront/spain/">Spain</option>
<option value="http://dignitytech.com/efront/romania/">Romania</option>
</select>
Now i want to change the dropdown value as per page change.
Anybody help me
You should be able to achieve this with this simple line of code executed on page load:
$('#location-search').val(location.href);
Based on what you already have, I'm assuming that you have exactly that select on multiple pages. If so, then simply on each page mark appropriate value (so when you're on contact-us, mark that option with selected attribute).

create textbox inside select

here is my simple html code for drop down list:-
<span id="Div_List">
<label for="Gender">For:</label>
<select name="Gender" id="Sex">
<option value="1">1000mtr</option>
<option value="2">1500mtr</option>
<option value="3">2000mtr</option>
</select>
</span>
i want to create one textbox inside select.
how its possible?
if any way to do this please suggest your idea.
thanks.
I guess you're looking for something like this.
Its impossible using strict html. You have to emulate it.
For example chosen is really nice plugin which you can check.
You can use jQuery .comboBox() in jQuery.It will hide the selectbox and it creates a text box to enter the data which is going to autopopulate
Read this for more info:
I hope it helps.

How to set the selected field of combo box within the view

I have two options in a combo box.
<select id="selLang">
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
When i choose the second option the page is refreshed and the selected option isn't displayed in the top of the combo box (i mean, as the selected item.)
I want to set the selected option to be the selected option which is in the top of the combo box- within the view.
so my question is just how can i do it? or maybe i have to create a cookie? and if so -how do i do t-h-a-t?
Perhaps it's a silly question, but i'm quite new in this region.
Thanks in advance!
you need to set the selected attribute of the option. you can do it as follows:
<select id="selLang">
<option value="en" >english</option>
<option value="fr" selected="selected" >french</option>
</select>
Hope this is what you wanted..
see this
I'd recommend you taking a look at the ASP.NET MVC localization guide which will provide you with some nice ideas about how to implement this.
First, why when you choose the second option, the page is refreshed. Do you have any JavaScript function in action to post your form.
I ask that, because HTML <select> tag's change won't initiate an HTTP Post request. So, please update an explanation for that.
However, let's go back to your question. You can try this:
<select id='selLang' name='selLang'>
<option value="/en" >english</option>
<option value="/fr" >french</option>
</select>
This will cause the <select> tag to become a successful control during a POST request. This means that you can use this to create a script like:
$(function(){
$('#selLang').val('#HttpContext.Request["selLang"]');
});

Categories

Resources