Say we have 2 different select boxes with the same number of options:
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>
Is it possible when we select the first box to select the same option number in the second box automatically? Without jQuery if possible.
UPDATE: the values of 2 boxes are different! When we select the first value of box1 the box 2's value will automatically would be 3! and so on...
Yes. Add an onChange property to the first select, then use it to call a javascript function you have written elsewhere.
<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
W3 Schools JavaScript Events
Example on Accessing SELECT properties in JS
The following JS would work:
document.getElementById("box1").onchange = function(){
document.getElementById("box2").value = this.value;
};
Not the most elegant code I've written but gets you what you need. Fiddle: http://jsfiddle.net/XZRKS/
A javascript snippet code:
var box1=document.getElementById("box1");
box1.onchange=function (){
document.getElementById("box2").value=box1.value;
}
Hope below is what you want...
<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<select id="box2" onChange="box1.value=box2.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
</body>
</html>
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
var val = parseInt(this.value);
box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);
This will only work in Gecko/Mozilla only
For IE use onChange instead of change and attachEvent instead of addEventListener, for more info visit
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
for information on querySelector see this link
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector
$("#box1").on('change',function(){
document.getElementById("box2").value = this.value;
console.log($("#box2").val());
});
$("#box2").on('change',function(){
document.getElementById("box1").value = this.value;
});
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
yes it's simple in javascript. just one line.
function ch(){
document.getElementById("box2").value = document.getElementById("box1").value ;
}
you can call ch() on onchange event of box2
Related
Those following code isnot working...
Firstly i want these selected value (by sentvalue() and receivevalue())
and then want to use those selected value on another(sent()) function ..
this is html code--
<select class="form-control" id="sents" onchange="sentvalue(this) " >
<option value="0" >-- Select One --</option>
<option value="1" ">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<select class="form-control" id="receives" onchange=" receivevalue(this); counter2(this); " >
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>
i want to use receivevalue() and sentvalue() on sent() function but it does not work...
var x,y;
function receivevalue(selv) {
var y = selv.options[selv.selectedIndex].value;}
function sentvalue(selv) {
var x= selv.options[selv.selectedIndex].value;
}
function sent(){
receivevalue();
gett=y;
sentvalue();
putt=x;
if(gett==1 && putt==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
i want sentvalue() variable x and receivevalue() variable y on sent() function . please solve my problem..
function sent(){
rselv = document.getElementById('receives');
receivevalue(rselv);
get=y;
sselv = document.getElementById('sents')
sentvalue(sselv);
put=x;
if(get==1 && put==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
First of all there is typo in sentevalue. It should be sentvalue.
Then your x, y variables are global. You shouldn't re-declare them inside function.
var x,y;
function receivevalue(selv) {
y = selv.options[selv.selectedIndex].value;
}
function sentvalue(selv) {
x = selv.options[selv.selectedIndex].value;
}
Now since you have values x and y in global variables, sent function can simply be written like this.
function sent(){
if(x==1 && y==1){
var userinput=document.getElementById('sent2').value;
var news=(userinput/88).toFixed(2);
document.getElementById('receive2').innerHTML=news;
}
}
And Correct HTML is:
<select class="form-control" id="sents" onchange="sentvalue(this)">
<option value="0" >-- Select One --</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<select class="form-control" id="receives" onchange="receivevalue(this); counter2(this);">
<option value="0">-- Select One --</option>
<option value="1" onclick="i();">1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>
<input type="number" id="sent2" onkeyup="sent()" class="form-control" name="number">
<p class="form-control" id="receive2" type="number" name="number" disabled>
I have dropdowns that show quantity and price of items. Each <option> has their own data-roomid attribute. When I select one <option>, it also shows all selected <option> of other dropdowns due to querySelectorAll() (I think). I just want to get only one data-roomid attribute when I select an <option> from any dropdown. How exactly can I do it?
Here is what I have done and as I said above, it gets every selected <option> of each dropdown no matter which dropdown I click.
function sumre() {
var selects = document.querySelectorAll(".rooms");
selects.forEach(function(select){
var roomid = select.options[select.selectedIndex].getAttribute("data-roomid");
alert(roomid);
});
}
<select id="room_length_dropdown_21" class="rooms" onchange="sumre()">
<option value="0">0</option>
<option data-roomid="48" value="1" data-price="88">1 ($ 88)</option>
<option data-roomid="49" value="2" data-price="176">2 ($ 176)</option>
<option data-roomid="50" value="3" data-price="264">3 ($ 264)</option>
<option data-roomid="51" value="4" data-price="352">4 ($ 352)</option>
<option data-roomid="52" value="5" data-price="440">5 ($ 440)</option>
</select>
<select id="room_length_dropdown_23" class="rooms" onchange="sumre()">
<option value="0">0</option>
<option data-roomid="58" value="1" data-price="77">1 ($ 77)</option>
<option data-roomid="59" value="2" data-price="154">2 ($ 154)</option>
<option data-roomid="60" value="3" data-price="231">3 ($ 231)</option>
<option data-roomid="61" value="4" data-price="308">4 ($ 308)</option>
</select>
What's about to pass "select" object to sumre method?
function sumre(select) {
var roomid = select.options[select.selectedIndex].getAttribute("data-roomid");
alert(roomid);
}
<select id="room_length_dropdown_21" class="rooms" onchange="sumre(this)">
<option value="0">0</option>
<option data-roomid="48" value="1" data-price="88">1 ($ 88)</option>
<option data-roomid="49" value="2" data-price="176">2 ($ 176)</option>
<option data-roomid="50" value="3" data-price="264">3 ($ 264)</option>
<option data-roomid="51" value="4" data-price="352">4 ($ 352)</option>
<option data-roomid="52" value="5" data-price="440">5 ($ 440)</option>
</select>
<select id="room_length_dropdown_23" class="rooms" onchange="sumre(this)">
<option value="0">0</option>
<option data-roomid="58" value="1" data-price="77">1 ($ 77)</option>
<option data-roomid="59" value="2" data-price="154">2 ($ 154)</option>
<option data-roomid="60" value="3" data-price="231">3 ($ 231)</option>
<option data-roomid="61" value="4" data-price="308">4 ($ 308)</option>
</select>
jQuery to simplify my answer
You can pass this to function to know what element you changed:
function sumre(el) {
var roomId = $('option:selected', el).data('roomid');
alert(roomId);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="room_length_dropdown_21" class="rooms" onchange="sumre(this)">
<option value="0">0</option>
<option data-roomid="48" value="1" data-price="88">1 ($ 88)</option>
<option data-roomid="49" value="2" data-price="176">2 ($ 176)</option>
<option data-roomid="50" value="3" data-price="264">3 ($ 264)</option>
<option data-roomid="51" value="4" data-price="352">4 ($ 352)</option>
<option data-roomid="52" value="5" data-price="440">5 ($ 440)</option>
</select>
<select id="room_length_dropdown_23" class="rooms" onchange="sumre(this)">
<option value="0">0</option>
<option data-roomid="58" value="1" data-price="77">1 ($ 77)</option>
<option data-roomid="59" value="2" data-price="154">2 ($ 154)</option>
<option data-roomid="60" value="3" data-price="231">3 ($ 231)</option>
<option data-roomid="61" value="4" data-price="308">4 ($ 308)</option>
</select>
I have a html code (a list item), and it works fine, when you click it, it drops down the list item, here is the code:
<div class="list-item"> <strong class="table-cell">Choose:</strong> <span class="table-cell right">
<!-- <input type="text" name="numberofchildren" id="numberofchildren" value=""> -->
<select name="numberofchildren" id="numberofchildren" value="numberofchildren" >
<option value="Blood Group" selected disabled>NO CHILDREN</option>
<option value="No Children" >No Children</option>
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
</select>
</span> </div>
But my question is this, how can I add a javascript code, that when a user chooses, for example "1" ( if he chose == "1" {...}, how can I do that.
Hope that I was clear, thank you very much for your time and effort.
function myfunction(select) {
if (select.value == "1") {
alert("You selected ONE");
} else {
alert("You selected: " + select.value);
}
}
<select name="numberofchildren" id="numberofchildren"
value="numberofchildren" onchange="myfunction(this)">
<option value="">Please select value...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I took the example from here http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/, Demo 4
Everything works fine, however I can not figure out how to calculate the sum from select list values and to withdraw at the end of the page. I try to do it with this code but it not work `
<section class="main clearfix">
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
</div>
<input type="text" id="sum">
</section>
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
delay : 40,
rotated : 'left'
} );
});
</script>
<script type="text/javascript">
$("#cd-dropdown").change(function() {
var total = 0;
$.each($(".cd-select") ,function() {
total += parseInt($(this).val());
});
$("#sum").val(total)});
`
Thank you in advance !
$(document).ready(function () {
$(".cd-select").change(function () {
total = 0;
$('.cd-select').each(function () {
if ($(this).val() != "-1") {
total = total + parseInt($(this).val(), 10);
}
});
$('#sum').val(total);
});
});
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
<select id="Select1" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
<select id="Select2" class="cd-select">
<option value="-1" selected>Choose a weather condition</option>
<option value="1" class="icon-sun">Sun</option>
<option value="2" class="icon-cloudy">Clouds</option>
<option value="3" class="icon-weather">Snow</option>
<option value="4" class="icon-rainy">Rain</option>
<option value="5" class="icon-windy">Windy</option>
</select>
</div>
<input type="text" id="sum">
When any select with class 'cd-select' change the sum will be calculated and displayed on the text field
Summation is not being made as you expect because your total variable is reset to 0 every time the event listener is fired. Thus your code will work if you define that variable as global.
Thus what you want is:
var total = 0;
$("#cd-dropdown").change(function() {
$.each($(".cd-select"), function() {
total += parseInt($(this).val());
});
$("#sum").val(total)
});
i have below code snippet in jsp
<HTML>
<BODY>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<div id="action1" class="action1">
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</div>
<div id="action2" class="action2">
<option value="4"> 4 </option>
</div>
<option value="5"> 5 </option>
</select>
</BODY>
</HTML>
on click of certain button, i want to hide the options with id as "action1" and display the options with Id as "action2". So i tried this
$('#action1').hide();
$('#action2').show();
But that did not work.Not getting whats the issue? In firebug when i tried to inspect the select box, i did not find any div tag(i.e
with ids action1/action2 ) above options.
Use below javascript function where showOptionsClass is the class given to each option you want to show. This will
work in cross browser.
function showHideSelectOptions(showOptionsClass) {
var optionsSelect = $('#selectId');
optionsSelect.find('option').map(function() {
return $(this).parent('span').length == 0 ? this : null;
}).wrap('<span>').attr('selected', false).hide();
optionsSelect.find('option.' + showOptionsClass).unwrap().show()
.first().attr('selected', 'selected');
}
You may not have <div> elements within a <select>, see for example this stackoverflow on the topic, which references this bit of the HTML spec.
Further, hiding options isn't cross browser compatible (see this stackoverflow (second answer)), as #Voitek Zylinski suggests, you would probably be better off keeping multiple copies of the select and toggling between them, or if keeping the id attribute is required then maybe even adjusting the innerHtml (yuck...).
You could maybe approach it like:
markup
<select onchange="doOperation()" class="js-opt-a">
<option value="default"> Start..</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3 </option>
</select>
<select onchange="doOperation()" class="js-opt-b">
<option value="default">Start...</option>
<option value="4"> 4 </option>
<option value="5"> 5 </option>
</select>
js
function doOperation() { /*whatever*/}
$(".js-opt-a").hide();
$(".js-opt-b").show();
See for example this jsfiddle
Not exactly ideal though!
You can not use div to group but you can assign class to options to group them.
Live Demo
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>
$('.action1').hide();
$('.action2').show();
You can't group options inside a div. You can group them inside an <optgroup>, but I don't think that's what you're aiming for.
What you should do instead, is to either create two dropdowns that you toggle between or keep one dropdown and repopulate its options.
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$('.action1').wrap('<span></span>').hide();
});
$("#show").click(function(){
$('.action1').unwrap('<span></span>').show();
});
});
</script>
</head>
<body>
<select id="customerIds" onchange="doOperation()">
<option value="default"> Start..</option>
<option value="1" class="action1"> 1</option>
<option value="2" class="action1"> 2</option>
<option value="3" class="action1"> 3 </option>
<option value="4" class="action2"> 4 </option>
<option value="5" class="action3"> 5 </option>
</select>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>