Is it possible for each dropdown options to link somewhere when selected without the need for an external button?
<select>
<option value="x">x</option>
<option value="y">y</option>
</select>
You can use the onChange property. Something like:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
Add an onchange event handler and set the pages location to the value
<select id="foo">
<option value="">Pick a site</option>
<option value="http://www.google.com">x</option>
<option value="http://www.yahoo.com">y</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
... or if you want / need to keep your option 'value' as it was, just add a new attribute:
<select id="my_selection">
<option value="x" href="/link/to/somewhere">value 1</option>
<option value="y" href="/link/to/somewhere/else">value 2</option>
</select>
<script>
document.getElementById('my_selection').onchange = function() {
window.location.href = this.children[this.selectedIndex].getAttribute('href');
}
</script>
Maybe this will help:
<select onchange="location = this.value;">
<option value="home.html">Home</option>
<option value="contact.html">Contact</option>
<option value="about.html">About</option>
</select>
This is an old question, I know but for 2019 peeps:
Like above if you just want to change the URL you can do this:
<select onChange="window.location.href=this.value">
<option value="www.google.com">A</option>
<option value="www.aol.com">B</option>
</select>
But if you want it to act like an a tag and so you can do "./page", "#bottom" or "?a=567" use window.location.replace()
<select onChange="window.location.redirect(this.value)">
<option value="..">back</option>
<option value="./list">list</option>
<option value="#bottom">bottom</option>
</select>
Extending on #kevin's answer,
if someone has to perform some confirmation logic if URL is critical.
<select onChange=" this.options[this.selectedIndex].text == 'Delete' ? "Confirmation logic" : window.location.href=this.value;" >
<option selected disabled>Action</option>
<option value="/user/view">View</option>
<option value="/user/edit">Edit</option>
<option value="/user/delete">Delete</option>
</select>
You can use this code:
<select id="menu" name="links" size="1" onchange="window.location.href=this.value;">
<option value="URL">Book</option>
<option value="URL">Pen</option>
<option value="URL">Read</option>
<option value="URL">Apple</option>
</select>
Related
Here is a dropdown menu of a website
<select name="ctl00$ddlWersjeJezykowe" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0)" id="ddlWersjeJezykowe" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
I want to change the language to English through browser console. I tried this on my console
document.getElementById("ddlWersjeJezykowe").value="2";
It only selects English but doesn't change the language. How can i change the language to English through my browser console?
Changing the value programmatically doesn't fire the onchange event, so you have to call setTimeout('__doPostBack(\'ctl00$ddlWersjeJezykowe\',\'\')', 0) too.
Alternatively, you can call document.getElementById("ddlWersjeJezykowe").onchange()
This is will get the selected value from select dropdown
<select id="language" style="width:100px;margin-right: 10px;">
<option selected="selected" value="1">Polska</option>
<option value="2">English</option>
<option value="17">Русская</option>
<option value="19">Українська</option>
<option value="20">Deutsch</option>
<option value="21">Français</option>
<option value="22">Español</option>
<option value="24">Português</option>
<option value="25">Türk</option>
</select>
function GetValue() {
var e = document.getElementById("language");
var result = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = result;
}
<button type="button" onclick="GetValue()">Get Selected Value</button>
<div id="result"></div>
When I change the option, the page doesn't change.
I want to change the page to '(value).html'.
function countryHandler() {
var x = document.getElementsByID("country").value;
window.location.href = "";
}
<select id="country" onclick="countryHandler();">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<select id="country" onchange="countryHandler(this.value)">
<option value="">Country...</option>
<option value="KR">Korea</option>
<option value="US">United States of America</option>
</select>
<script>
function countryHandler(value) {
window.location.assign(`${value}.html`);
}
</script>
You have to listen on change in select section.
Use
window.location('http://example.com');
or
window.location.assign('http://example.com');
The onchange attribute fires the moment when the value of the element is changed.
function urlHandler(value) {
window.location.assign(`${value}`);
}
<select id="url" onchange="urlHandler(this.value)">
<option disabled selected value>Select Option</option>
<option value="https://techne.africa">TechNe Africa</option>
<option value="https://google.com">Google</option>
<option value="https://facebook.com">Facebook</option>
<option value="https://twitter.com">Twitter</option>
<option value="https://instagram.com">Instagram</option>
<option value="https://youtube.com">YouTube</option>
<option value="https://linkedin.com">LinkedIn</option>
</select>
If I have this code:
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
</td>
And I wish to find out which option value is selected, how can I do this via jQuery? Also the issue is that I have a handle on the <td> element and I want to be able to access the <select> from the <td> element and then check what the selected option is.
Yes.
Just try:
$("#id_virtual_as_set-0-type").val()
Here, i have created an example of how to do this.
$(document).ready(function(){
function getSelectedProperty(select){
var selectedOption = select.find("option:selected");
$("p").html("selected Value:"+selectedOption.val() + " SelectedText:" +selectedOption.html())
}
var select = $("select");
select.change(function(){
getSelectedProperty($(this));
});
getSelectedProperty(select);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="field-type">
<select id="id_virtual_as_set-0-type" name="virtual_as_set-0-type">
<option value="M">M</option>
<option value="AI" selected="selected">AS I</option>
<option value="D">D</option>
<option value="P">P</option>
<option value="A">A</option>
<option value="R"</option>
</select>
<p></p>
</td>
There's many way to do it.
And this is how I do
$('select').on('click', function() {
console.log($(this).find('option:selected').val());
});
I want to change multiple select buttons's values with another select button.
Practically when someone select an option in the main select button, the other select buttons must change with that value.
EDIT: I added the code, the first is the main select button and after I select somethig there, it should change in the others.
<select class="select_format">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
<select name="format[]" class="format_imgs">
<option value="0.49">9x13</option>
<option value="0.59">10X15</option>
<option value="0.99">13X18</option>
<option value="1.20">15X21</option>
<option value="2.60">20X30</option>
</select>
Thanks.
Since you didn't supply code here's a guess:
$(".myTriggerButton").on("click", function() {
$(".buttonToChangeValue").each(function() {
this.value = "new value";
});
});
$('.select_format').change(function(){
$('.format_imgs').val( $(this).val() );
});
https://jsfiddle.net/7hno0ob8/1/
I want to get the <option> values and text from a <select> element #myselect, and add it to another <select> element #newselect. The value and text passed to the second select element, #newselect, must also be disabled. I'd like support for IE 8+.
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
Take the above, disable them and add them to the below:
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
<option disabled value="1">Red</option>
<option disabled value="2">Orange</option>
<option disabled value="3">Yellow</option>
</select>
Since you included the jQuery tag, here's a jQuery solution.
As long as you're using jQuery 1.x, IE8 support is included.
$('#myselect option').each(
function() {
$(this).prop('disabled', true).appendTo('#newselect');
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>
You already have jQuery answer. So now if you are curious how it can be in pure javascript, here it is. As you can see, it's a little more verbose of course:
var mySelect = document.getElementById('myselect'),
newSelect = document.getElementById('newselect');
while (mySelect.options.length) {
mySelect.options[0].disabled = true;
newSelect.add(mySelect.options[0]);
}
<select id="myselect">
<option value="1">Red</option>
<option value="2">Orange</option>
<option value="3">Yellow</option>
</select>
<select id="newselect">
<option value="1">Green</option>
<option value="2">Blue</option>
</select>