I recently posted a related question copying selected option to another select.
I realised that what I'm trying to do is more straightforward but I hope I'm not breaking forum rules by "double posting" because this question is slightly different. Here goes. I want "productchoice" to affect "productchoice2".
<select id="productchoice">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
My question is: when "productchoice" is changed, what javascript should I put in to make "productchoice2" reflect the same choice?
Thanks for your help again, kind people!
HTML
<select id="productchoice" onchange="productchoicechange()">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
JS
jsfiddle by index
// by index
function productchoicechange(){
var productchoice = document.getElementById("productchoice");
var productchoice2 = document.getElementById("productchoice2");
productchoice2.options[productchoice.options.selectedIndex].selected = true;
}
jsfiddle by value
// by value
function productchoicechange(){
var productchoice = document.getElementById("productchoice");
var productchoice2 = document.getElementById("productchoice2");
productchoice2.value = productchoice.value;
}
Using pure JS you can do this:
var select_element = document.getElementById('productchoice');
select_element.onchange = function(e){
document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}
Demo: http://jsfiddle.net/tymeJV/Zayq4/
if you'd like to use jQuery
$('#productchoice').change(function (){
$('#productchoice2').val($(this).val());
});
JSFiddle
Try using angularJS
JSFiddle:-http://jsfiddle.net/adiioo7/xUPZv/
HTML:-
<html ng-app>
<body>
<select id="productchoice" ng-model="selection">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
<select id="productchoice2" ng-model="selection">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>
Related
I know this is a simple question. But I couldn't find a way to overcome this issue. All I want is this. I have a drop-down created using select element & when user selecting a city from that drop-down it should be able to pass that selected value to console ( console.log() ). But I am able to pass very first selected value only. I found a way to pass values to console using onChange() with select element as following code.
HTML
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
JS
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
But in my case, the whole procedure needs to be code without using onChange() in HTML. Because I have to get user inputs from WordPress form and need to make separate JS file from the form. So, I can't add or change HTML code of the form. My code is below.
HTML code
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
The JS code I used is below.
JS code
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
Please help me with this issue.
const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
Please take a look on this fiddle:
Fiddle
const selectCites = document.getElementById("city-selection");
selectCites.addEventListener("change", function(e) {
e.preventDefault();
const { srcElement } = e;
const { selectedOptions } = srcElement;
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})
Basically I added a event listener on the select and wait for any changes and then I loop through the selectedOptions in a case you have more than one.
Just add the EventListener to listen for a change-event:
document.addEventListener("change", function() {
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
}
You can register an external event listener to respond to the change event like this:
document.querySelector('select[name="city"]').addEventListener('change',function(e){
console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
you cant use target property. like this :
const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
console.log(e.target.value)
});
Almost all the best alternatives has been given, you can either use pure javascript or jquery
Say this is your HTML codes for Cities in Tanzania:
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="dar">Dar es Salaam </option>
<option value="mbeya">Mbeya</option>
<option value="mwanza">Mwanza</option>
<option value="dodoma">Dodoma</option>
<option value="arusha">Arusha</option>
<option value="morogoro">Morogoro</option>
<option value="tanga">Tanga</option>
<option value="zanzibar">Zanzibar City</option>
<option value="kigoma">Kigoma</option>
</select>
So your pure javascript can be:
document.getElementById('city-selection').addEventListener('change', function() {
let selectedCity = this.value;
console.log(selectedCity);
});
Jquery:
$('#city-selection').on('change', function() {
let selectedCity = $(this).val();
//let selectedCity = this.value; this will also do the same
//as the above declaration format
console.log(selectedCity);
});
I hope this can be of help to you
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
I'm using JQuery 1.11.1. I have two select menu elements, one containing options like
<select id="select1">
<option value="A">option A</option>
<option value="B">option B</option>
...
<option value="">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
...
</select>
How do I copy the options up to and including the option with the
"=============" text to the second select menu (let's say the second select menu has id='select2').
Thanks, - Dave
var option, count = -1;
while ((option = $('#select1 option')[++count]).value != "")
{
$(option).clone().appendTo('#select2');
}
$($('#select1 option')[count]).clone().appendTo('#select2'); //for the '=====' one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option value="A">option A</option>
<option value="B">option B</option>
<option value="">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
</select>
<select id="select2">
</select>
First solution:
You can do it this way:
var emptyOption = $("#select1 option").filter(function() {
return $.trim( $(this).val() ) == '';
});
var $options = emptyOption.prevAll().addBack().clone();
$('#select2').append($options);
JSFiddle: http://jsfiddle.net/inanda/uosvokdr/2/
Second solution:
If you can add a class to the options you want to copy, you can do it the following way.
HTML
<select id="select1">
<option value="A" class="copy">option A</option>
<option value="B" class="copy">option B</option>
<option value="" class="copy">=============</option>
<option value="AA">option AA</option>
<option value="BB">option BB</option>
</select>
<select id="select2">
</select>
Javascript:
var $options = $("#select1 > option.copy").clone();
$('#select2').append($options);
Working JsFiddle: http://jsfiddle.net/inanda/m2qd177u/1/
I want to add separators to php-generated list with jQuery
<select>
<option value="0">all</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">other</option>
</select>
How to put separators after first eleent and before the last element that result is
<select>
<option value="0">all</option>
<option value="-1" disabled="disabled">------</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="-1" disabled="disabled">------</option>
<option value="4">other</option>
</select>
?
Thank you
var $ops = $('select option'), //refine selector if needed
$sep = $('<option>', { text: '------', disabled: true, value: -1 });
$ops.first().after($sep.clone()).end()
.last().before($sep);
Fiddle
Reference:
Traversing - Filtering
Manipulation - DOM Insertion, Outside
Don't know if it's exactly what you need, but the <optgroup> tag does something like that
Shorter code:
$("option[value=0]").after('<option value="-1" disabled="disabled">------</option>');
I'm kicking my self for not being able to do this. But I've tried almost everything. I simply want to redirect a user to a specific page when they click an option in my option value list. Here's my current code (which should explain my question better):
<select name="test_redirect">
<option value="1" onclick="document.location = 'http://localhost/shop?item=1';">Item 1</option>
<option value="2" onclick="document.location = 'http://localhost/shop?item=2';">Item 2</option>
<option value="3" onclick="document.location = 'http://localhost/shop?item=3';">Item 3</option>
</select>
I've also tried onChange as well. Same result. Can some one please help me with this? Thank you guys.
document.querySelectorAll("[name=test_redirect]")[0].addEventListener('change',
function () {
window.location = "http://localhost/shop?item=" + this.value;
});
This depends on a relatively new browser (with querySelectorAll and addEventListener), but the principle's the same. click doesn't get triggered on options, so you have to go with change on the <select>. Might as well consolidate the code a bit too.
http://jsfiddle.net/5n5ZE/
<select id="test_redirect">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
javascript
var val = document.getElementById("test_redirect").value;
window.location.href = "http://localhost/shop?item=" + val;
jquery
$("#test_redirect").change(function(){
var val = $(this).val();
window.location.href = "http://localhost/shop?item=" + val;
});
try this (give the link of the page in value of each option)
<select name="test_redirect" onchange="window.location.href=this.form.test_redirect.options[this.form.test_redirect.selectedIndex].value">
You need to bind the event handler to the <select> and not the individual options:
<select name="test_redirect" onchange="location.assign('http://localhost/shop?item=' + this.options[this.selectedIndex].value)">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
This will save you lines :
<select onchange="location = this.options[this.selectedIndex].value;">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
try this
<select name="test_redirect" onchange="location.href='http://localhost/shop?item='+this.value">
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>