Hello I have a problem with html Select...When user will click one of the Value then background images have to change and appear a new Select and the old Select will disappear. I tried many things but it wasn't work...help me out please...
Here is the code:
<script>
$(document).ready(function(){
var header = $('body');
function SelectElement(valueToSelect)
{
var element = document.getElementById('test');
element.value = '1';
}
$(function() {
$('.test').click(function() {
var backgrounds = new Array(
'url(images/Main/1.png)'
, 'url(images/Main/2.jpg)'
, 'url(images/Main/3.jpg)'
, 'url(images/Main/4.jpg)'
, 'url(images/Main/5.jpg)'
, 'url(images/Main/6.jpg)'
, 'url(images/Main/7.jpg)'
, 'url(images/Main/8.jpg)'
, 'url(images/Main/9.jpg)'
, 'url(images/Main/10.jpg)'
);
});
});
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 6000);
header.css('background-image', backgrounds[0]);
});
</script>
</head>
<body>
<center>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
<form name="test">
<select id="test" name="test">
<option value="Select Season" selected="selected" disabled="disabled">Select Season..</option>
<option value="1" onclick="function()">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>
There are several issues with your current code - test is an id, not a class, so the selector is #test instead of .test
The array containing the images is not accessible from the function nextBackground(), as this array is defined in the function attached to the click event.
To be accessible for other function, it can be declared global.
I guess you don't want to change the image when select is clicked, but when an option is selected.
Maybe you want to change the background image according to the selected option - in this case it's possible to attach a function to the change() event of the select
and select the image from the background array with the index according to
the option value e.g. like this:
$('#test').change(function () {
header.css('background-image', backgrounds[$(this).val() -1]);
});
In addition, in your current code you call the function nextBackground() which
cycles through all background images.
I've just commented this out in the example Fiddle
Remaining question is how the new select that you want to display instead of the old select when an option is selected should be different from the old select, maybe
you can add this information to your question.
Your question is not entirely clear. The first (hidden) snippit below will set the background to the image that is stored in an array at the same index as the selected option and then show a different select box as you asked. But I get the feeling the second (showing) snippet is what you really need.
To better help you, please edit your question to include answers to the below questions:
Should the timer begin changing the backgrounds as soon as the
page loads?
What should happen when the first select box is changed
what should happen when the second select box is changed?
are we talking about the page body's background or some other div, or does each event control the background for a different div?
Are all of the pictures pulled from the same array or does each event have a different pool of source inmages?
$(document).ready(function(){
var header = $('body');
function SelectElement(valueToSelect)
{
var element = document.getElementById('test');
element.value = '1';
}
$('#test').change(function() {
// I did this with 4 images for testing, add as many as you like in yours
var backgrounds = ['url(http://stylonica.com/wp-content/uploads/2014/03/Nature___Seasons___Spring__038259_.jpg)'
, 'url(http://hd.wallpaperswide.com/thumbs/summer_holiday-t2.jpg)'
, 'url(http://www.grandfather.com/wp-content/uploads/2012/08/fall-road.jpg)'
, 'url(http://hooptricks.org/wp-content/uploads/2014/01/road-winter.jpg)'];
// get index of selected option
// -1 is to account for the disabled fist option acting as a placeholder
var cur = $(this)[0].selectedIndex -1;
// set the image to the background
header.css('background-image', backgrounds[cur]);
//hide the first select and show the second
$('#fisrtSelDiv').hide();
$('#secondSelDiv').show();
});
/*
// I commented the below out as it doesnt appear to be related to your question
// if you need the select to begin a timer that changes the backgrounds peridically
// please edit your question with more detail
var current = 0;
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
setInterval(nextBackground, 6000);
header.css('background-image', backgrounds[0]);
*/
});
#secondSelDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
<div id="fisrtSelDiv">
<form name="test">
<select id="test" name="test">
<option value="" selected="selected" disabled="disabled">Select Season..</option>
<option value="Season 1">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>
</div>
<div id="secondSelDiv">
<form name="test2">
<select id="test2" name="test">
<option value="" selected="selected" disabled="disabled">Select something else...</option>
<option value="something 1">A thing</option>
<option value="something 2">A second thing</option>
<option value="something 3">Something else</option>
<option value="something 4">Another thing</option>
</select>
</form>
</div>
It seems more likely that you want the image rotation to start when the user selects an option then show the next select, if so this'll get you there:
$(document).ready(function(){
var header = $('body');
var current = 0;
// I did this with 4 images for testing, add as many as you like in yours
var backgrounds = ['url(http://stylonica.com/wp-content/uploads/2014/03/Nature___Seasons___Spring__038259_.jpg)'
, 'url(http://hd.wallpaperswide.com/thumbs/summer_holiday-t2.jpg)'
, 'url(http://www.grandfather.com/wp-content/uploads/2012/08/fall-road.jpg)'
, 'url(http://hooptricks.org/wp-content/uploads/2014/01/road-winter.jpg)'];
function SelectElement(valueToSelect)
{
var element = document.getElementById('test');
element.value = '1';
}
$('#test').change(function() {
// set the first image to the background
header.css('background-image', backgrounds[0]);
//start the timer
setInterval(nextBackground, 6000);
//hide the first select and show the second
$('#fisrtSelDiv').hide();
$('#secondSelDiv').show();
});
function nextBackground() {
current++;
current = current % backgrounds.length;
header.css('background-image', backgrounds[current]);
}
});
#secondSelDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="black">
<div style="margin-top:22%;margin-bottom:-22%;">
<div id="fisrtSelDiv">
<form name="test">
<select id="test" name="test">
<option value="" selected="selected" disabled="disabled">Select Season..</option>
<option value="Season 1">Season 1</option>
<option value="Season 2">Season 2</option>
<option value="Season 3">Season 3</option>
<option value="Season 4">Season 4</option>
</select>
</form>
</div>
<div id="secondSelDiv">
<form name="test2">
<select id="test2" name="test">
<option value="" selected="selected" disabled="disabled">Select something else...</option>
<option value="something 1">A thing</option>
<option value="something 2">A second thing</option>
<option value="something 3">Something else</option>
<option value="something 4">Another thing</option>
</select>
</form>
</div>
Related
I have two select options :
<select id="Living things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
Consider the first options from both the drop downs are default. Now imagine I selected 'Animals' from first and 'less' from second. Now if I change the first to 'Plants' then the second list should be reset.i.e,
<option>Any</option>
<option>less</option>
<option>greater</option>
Please help in this.Thank You.
<select id="livingThings" onchange="reset();">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
<script src="test.js"></script>
livingThings = document.getElementById('livingThings');
compare =document.getElementById('compare');
function reset(){
if (livingThings.selectedIndex != 0){
compare.selectedIndex = 0;
}
}
You can add an event listener for the first select element whenver it changes then reset the value of the second select element to its default, note that IDs can not have white spaces, I have added a dash to it
document.querySelector("#Living-things").onchange = function() {
let select = document.querySelector("#Compare");
select.value = select.children[0].value;
}
<select id="Living-things">
<option>Choose Any</option>
<option>Animals</option>
<option>Plants</option>
</select>
<select id="Compare">
<option>Any</option>
<option>less</option>
<option>greater</option>
</select>
I have two dropdown right now. I want to when the user selects "NO" the other automatically selects "YES" and vice versa.
I'm assuming I use JS here to make this occur, but not sure where to start. Below is my dropdown html code. If someone could help me get started, it would be helpful.
Code:
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" name = "microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div
You can assign a same class to each select element and bind change event listener.
$('.elem').on('change', function() {
if ($(this).val() == 'on') {
$('.elem').not(this).val('off');
} else {
$('.elem').not(this).val('on');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmicrophone" id="cmicrophone">Currently:
<select id="cmicrophone" class='elem' name="cmicrophone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div class="microphone" id="microphone">Microphone:
<select id="microphone" class='elem' name="microphone">
<option value="" selected = "selected"></option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
A good starting point might be listening for changes on one select, and when the change happens, selecting the other <select> and setting the right value
Here's a vanilla JS solution (no jquery required).
The idea here is to:
select both <select> elements and save them into variables to refer to later using document.querySelector
add input event listeners on both elements that call a function to handle the event
then use inside the function selectElement.selectedIndex to check the selected index of one element and use that to set the value of the other.
// select the `<select>` elements
const cmicrophone = document.querySelector('#cmicrophone');
const microphone = document.querySelector('#microphone');
// define function to handler the events
function inputHandler(thisSelect, otherSelect) {
if (thisSelect.selectedIndex == 1) {
otherSelect.selectedIndex = 2;
} else if (thisSelect.selectedIndex == 2) {
otherSelect.selectedIndex = 1;
} else {
thisSelect.selectedIndex = 0;
otherSelect.selectedIndex = 0;
}
}
// add event listeners that will 'fire' when the input of the <select> changes
cmicrophone.addEventListener('input', event => {
inputHandler(cmicrophone, microphone);
});
microphone.addEventListener('input', event => {
inputHandler(microphone, cmicrophone);
});
<div>Currently:
<select id="cmicrophone" name="cmicrophone">
<option value=" " selected = "selected"> </option>
<option value="on">ON</option>
<option value="off">OFF</option>
</select>
</div>
<div>Microphone:
<select id="microphone" name="microphone">
<option value=" " selected="selected"> </option>
<option value="on" >ON</option>
<option value="off">OFF</option>
</select>
</div>
One more thing to add: You assigned the same value to multiple ids. You should only assign one unique id per element.
i have this form ..
<form method="post" action=''>
<select class="first">
<option value="0">choose ...</option>
<option value="1">Hello</option>
<option value="3">It's</option>
</select>
<select class="second">
<option value="0">choose ...</option>
<option value="2">World</option>
<option value="4">me</option>
</select>
<input type="text" class="dest" value="" />
</form>
and would like to dynamically gather selected informations with jQuery, because I need to decide on the selected values ...
When you select specific combination of OPTION values (lets say Hello + World) it should add some value to INPUT.dest and lock it (disable from editing) ...
But I can't make it work ... What I have, is that on each change of each select (separately only) i can map the actual value
$(document).ready(function () {
$(".first").change(function () {
var option = $(this).find("option:selected").val();
$(".dest").val(option);
});
$(".second").change(function () {
var option2 = $(this).find("option:selected").val();
$(".dest").val(option2);
});
});
Here is the live demo in fiddle
Do you know what am I missing? I know it will be just a little thing .. thank you
I would generalize it and use one event listener, and then gather the combination and do whatever:
$("select").change(function () {
var first = $(".first").find("option:selected").val();
var second = $(".second").find("option:selected").val();
if(first == 1 && second == 2)
$(".dest").val("Hello world").prop("disabled",true);
else
$(".dest").val("Something else").prop("disabled",false);
});
http://jsfiddle.net/cxx428af/3/
I have a drop down list that has 4 options, so what I want is when I click on the value "from" it shows a hidden div (used CSS to hide this div "display: none;"). anyone can help me with that? THANKS!
Html:
<select id="type">
<option value="">--select--</option>
<option value="category">Category</option>
<option value="brand_name">Brand</option>
<option value="campaign_name">Campaign</option>
<option value="from">Recap date</option>
</select>
</label>
<div id="showfrom">
<input type="text" class="filter" value="02-16-2012" id="from">
</div>
Js:
$("#type").change(function() {
var selected = $(this).find(':selected').val();
if (selected == from) {
$("#showfrom").show();
}
});
from should be a string literal. Also you need to hide if something else is selected so better if you can use .toggle()
$("#type").change(function () {
$("#showfrom").toggle(this.value == 'from');
}).change();//to set the initial state
Demo: Fiddle
How to change the contents of 2nd select box based on value of first select box. no jQuery but only JavaScript enable second select box based on various inputs from 1st select box(div2) only JavaScript no jQuery no inner HTML if switch used.
<script> //javascript
function showHide(elem) {
if(elem.selectedIndex != 0) {
//hide the divs
for(var i=0; i < divsO.length; i++) {
divsO[i].style.display = 'none';
}
//unhide the selected div
document.getElementById('div'+elem.value).style.display = 'block';
}
}
window.onload=function() {
//get the divs to show/hide
divsO = document.getElementById("details").getElementsByTagName('div');
disO = document.getElementById("details").getElementsByTagName('di');
}
</script>
<div id="div2"> //select boxes
<select size="1" id="rambo" name="comm-name" selected="selected" onchange="showhide(this)" >
<option value="" selected="selected">-Select Office-</option>
<option value="3">HEAD OFFICE</option><option value="4">REGIONAL OFFICE</option>
<option value="5">DIVISIONAL OFFICE</option><option value="6">BRANCH OFFICE</option>
<option value="7">SERVICE CENTER</option><option value="8">EXTENSION COUNTER</option>
<option value="9">Show div 9</option><option value="10">Show div 10</option>
<option value="11">Show div 11</option><option value="12">Show div 12</option>
<option value="13">Show div 13</option><option value="14">Show div 14</option>
<option value="15">Show div 15</option><option value="16">Show div 16</option>
<option value="17">Show div 17</option><option value="17">Show div 18</option>
<option value="19">Show div 19</option><option value="18">Show div 20</option>
<option value="21">Show div 21</option>
</select>
</div>
<div id="di21"> <select name="" >
<option value="">Select an option</option>
<option value="4">Show div 4</option>
<option value="5">Show div 5</option>
<option value="6">Show div 6</option>
</select>This </div>
..... so on
//And this is asking me time and again to add some context to explain the code.. I do not know what to do ?
// the JavaScript function above opens up a new select box each time I change the option in the first select box.
Here is the Fidle
I simplified your html just for testing purpose and in function SetSel(elem) you can always write custom code to select second combo value as per logic