Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
pls can any one help.it always return else..what i want is, when select 1st dropdown,the second dropdown hide and Vice Versa
html
<form id="myform" onchange="check();" >
<select id="myselecta" >
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" >
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
java script
function check() {
var dropdown = document.getElementById('myform').value;
if (dropdown == 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
}
else {
document.getElementById('myselecta').style.display = 'none';
}
}
Do you want to accomplish something like this?
HTML
<select id="switch" onchange="check();">
<option value="myselecta">myselecta</option>
<option value="myselectb">myselectb</option>
</select>
<select id="myselecta">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
JS
function check() {
var dropdown = document.getElementById('switch').value;
if (dropdown === 'myselecta') {
document.getElementById('myselecta').style.display = 'block';
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
document.getElementById('myselectb').style.display = 'block';
}
}
Edit
html
<select id="myselecta" onclick="check()">
<option value="a1">a1</option>
<option value="a2">a2</option>
</select>
<select id="myselectb" onclick="check()">
<option value="b1">b1</option>
<option value="b2">b</option>
</select>
javascript
function check() {
if (this.id === 'myselecta') {
document.getElementById('myselectb').style.display = 'none';
} else {
document.getElementById('myselecta').style.display = 'none';
}
}
Try changing
var dropdown=document.getElementById('myform').value;
to
var dropdown=document.getElementById('myform').getAttribute('id');
As far as I know, onchange event doesn't capture individual select's onchange events. You should better add an onchange to each individual select element and pass a parameter to the function, like the element's ID to differentiate which element fired the event.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm beginner in JavaScript. I want to use the drop-down button for calculateing but I don't know how I can take the value of choices and put them in calculation. Is it possible to help me that how I can do it and put the values in formula?
<select id="Selectpaint">
<option selected disabled>نوع رنگ اکریلیک</option>
<option value="8">رنگ اکریلیک طلایی</option>
<option value="8">رنگ اکریلیک متالیک صدفی</option>
<option value="13">رنگ اکریلیک مات </option>
<option value="14">رنگ اکریلیک نیم براق </option>
<option value="13">رنگ اکریلیک براق</option>
<option value="10">رنگ اکریلیک آستری</option>
<option value="12">مادر رنگ اکریلیک</option>
</select>
</p>
<p>
Maybe after taking the value, I use it in formula which is contained different number that user put in different fields.
Execute a JavaScript when a user changes the selected option of a element
HTML
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
JavaScript
function myFunction() {
var x = document.getElementById("mySelect").value;
// use your formula here
}
So here x will contain the selected value. You can use this x value and add it in the calculation function.
With this code you can show the result in the <p> below.
const applyFormula = (value) => {
return value * 2 + 10; //Use here your formula
}
const onDropdownChange = (event) => {
document.getElementById('result').innerHTML = applyFormula(event.target.value);
}
document.getElementById('Selectpaint')
.addEventListener('change', onDropdownChange);
<select id="Selectpaint">
<option selected disabled>نوع رنگ اکریلیک</option>
<option value="8">رنگ اکریلیک طلایی</option>
<option value="8">رنگ اکریلیک متالیک صدفی</option>
<option value="13">رنگ اکریلیک مات </option>
<option value="14">رنگ اکریلیک نیم براق </option>
<option value="13">رنگ اکریلیک براق</option>
<option value="10">رنگ اکریلیک آستری</option>
<option value="12">مادر رنگ اکریلیک</option>
</select>
<p id='result'></p>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I had created a sample drop down list, below is the code.
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button>GO</button>
After selecting the dropdown item and clicking on GO button i want to redirect the page to respective sites like, https://www.amazon.in/ ,https://www.flipkart.com/ and https://www.snapdeal.com/ respectively.
Kindly help me how can i do this
I hope below code helps you,
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="http://www.amazon.com">Amazon</option>
<option value="http://www.flipkart.com">Flipkart</option>
<option value="http://www.snapdeal.com">Snapdeal</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
function siteRedirect() {
var selectbox = document.getElementById("select-id");
var selectedValue = selectbox.options[selectbox.selectedIndex].value;
window.location.href = selectedValue;
}
</script>
You can try the following way:
var linkArr = ["https://www.amazon.in/","https://www.flipkart.com/","https://www.snapdeal.com/"];
var selectedPosition = 0;
document.getElementById('select-id').addEventListener('change', function(){
selectedPosition = this.selectedIndex;
});
document.getElementById('go').addEventListener('click', function(){
if(selectedPosition != 0)
window.location.href = linkArr[selectedPosition-1];
});
<select id="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="">Amazon</option>
<option value="">Flipkart</option>
<option value="">Snapdeal</option>
</select>
<button type="button" id="go">GO</button>
<select id="selectid">
<option j-link="" value="" selected="">Pick a E-commerce</option>
<option j-link="http://amazon.com" value="">Amazon</option>
<option j-link="http://flipkart.com" value="">Flipkart</option>
<option j-link="http://snapdeal.com" value="">Snapdeal</option>
</select>
<button id="buttonid">GO</button>
<script>
document.getElementById("buttonid").onclick = function () {
var select = document.getElementById("selectid");
var option = select.children[select.selectedIndex];
if (!option || !option.getAttribute("j-link") || !option.getAttribute("j-link").length)
return;
window.location = option.getAttribute("j-link");
};
</script>
// handle click
$("#go").on("click", function(){
//get selected option value
var option = $('#select-id').find('option:selected').attr('value');
console.log(option)
//redirect to that link
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = option;
var win = window.open(URL, "_blank", strWindowFeatures);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<button id="go">Go</button>
if you are ok to use jquery :
<select id="select-id" name="select-id">
<option value="" selected="">Pick a E-commerce</option>
<option value="https://www.amazon.in/">Amazon</option>
<option value="http://flipkart.com">Flipkart</option>
<option value="http://snapdeal.com">Snapdeal</option>
</select>
<script>
$("#select-id").on("change", function(){
location.href = this.value;
})
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I want to load the option value in div>. The below code can be run successfully.
<select onchange="location.assign = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<div id="load_page"></div>
How can I load the page inside div
thanks.
With jQuery you can use $.load():
$(function() {
var page = $('#load_page');
$('#pages').on('change', function(e) {
var option = $(this).find('option:selected');
if (0 === option.index()) {
page.text('Oops');
} else {
page.text('Loading ' + option.val());
page.load(option.val());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pages">
<option>Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<div id="load_page"></div>
With just iframe and js:
document.getElementById('pages').onchange = function(e) {
document.getElementById('load_page').src = this.options[this.selectedIndex].value;
};
<select id="pages">
<option value="">Please select</option>
<option value="page1.html">page1</option>
<option value="page2.html">page2</option>
<option value="page3.html">page3</option>
</select>
<iframe id="load_page"></iframe>
You can use load() method of jquery. The load() method loads data from a server and puts the returned data into the selected element.
$(document).ready( function() {
$("select").on("change", function() {
if($("select option:selected").index() > 0) {
console.log("cannot load");
} else {
$("#load_page").load($('option').val());
}
});
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Hello I have first one input which is
<select id="selectcontract" name="contract" class="input-xlarge" >
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
this input contains 2 options Buy and Rent. So I would like when you choose Buy foe example to populate the values of second and third input if you choose Rent to populate exactly those same inputs but with different values and value names.
here are the second and the third inputs:
Second Select:
<select id="Pricefrom" name="minimum_price" >
<option value="">Price From</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
Third Select:
<select id="Princeuntil" name="maximum_price" >
<option value="">Price Until</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
Any advice in which direction I should realize this goal ? I guess it should be something with jquery since the change should be made mediate when you choose either buy or rent.
You can create one div for buy and one for rent with class and after show or hide their
Example on fiddle:
https://jsfiddle.net/tehb2fxt/1/
Div Buy (is necessary change the name prop to not repeat) and add CLASS "class_price"
<select id="selectcontract" name="contract" class="input-xlarge class_price">
<option value="">Contract</option>
<option value="1">Buy</option>
<option value="2">Rent</option>
</select>
<div class="div_buy" style="display: none">
<select id="Pricefrom_buy" name="Pricefrom_buy" class="class_price">
<option value="">Price From Buy</option>
<option value="1">1</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
</select>
<select id="Princeuntil_buy" name="Princeuntil_buy" class="class_price">
<option value="">Price Until Buy</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="2000">2000</option>
</select>
</div>
<div class="div_rent" style="display: none">
<select id="Pricefrom_rent" name="Pricefrom_rent" class="class_price">
<option value="">Price From Rent</option>
<option value="8">8</option>
<option value="800">800</option>
<option value="8000">8000</option>
<option value="8500">8500</option>
</select>
<select id="Princeuntil_rent" name="Princeuntil_rent" class="class_price">
<option value="">Price Until Rent</option>
<option value="900">900</option>
<option value="9000">9000</option>
<option value="9500">9500</option>
<option value="9000">9000</option>
</select>
</div>
Jquery to show and hide according with select:
<script type="text/javascript">
$(document).ready(function(){
$('#selectcontract').change
(
function()
{
if($(this).val() == "1")
{
$('.div_buy').show('slow');
$('.div_rent').hide('slow');
}
else if($(this).val() == "2")
{
$('.div_buy').hide('slow');
$('.div_rent').show('slow');
}
else
{
$('.div_buy').hide('slow');
$('.div_rent').hide('slow');
}
}
);
}
);
</script>
To control and not be in conflict 2 selects add input text(will changed to type="hidden" when finish test) for recovery values of pricefrom and princeuntil(buy and rent)
<input type="hidden" id="Pricefrom" value="0" name="Pricefrom">
<input type="hidden" id="Princeuntil" value="0" name="Princeuntil">
And add event Jquery when values class changed
$('.class_price').change
(
function () {
if($('#selectcontract').val() == "1") //if buy
{
$('#Pricefrom').val($('#Pricefrom_buy').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_buy').val()); //get value select
}
else if($('#selectcontract').val() == "2") //if rent
{
$('#Pricefrom').val($('#Pricefrom_rent').val()); //get value select
$('#Princeuntil').val($('#Princeuntil_rent').val()); //get value select
}
else {//if not select
$('#Pricefrom').val("0");
$('#Princeuntil').val("0");
}
}
);
Static Lists
A simple fiddle proof of concept.
https://jsfiddle.net/cgjjg2dy/
The main part is:
$('#selectcontract').change(function (event) {
$(".section").hide();
$("#section" + $(this).val()).show();
});
I hide all the sections, then I show the one that corresponds to the option chosen. You can get even fancier with fadeOut() and fadeIn() too!
AJAX
If you want to dynamically retrieve your options from a server/database, you have to use AJAX. Instead of using .hide() and .show() in your change() handler, you just make an AJAX call and retrieve the data, then modify the DOM as necessary. Quite a bit more complex, but still the same idea.
This question already has answers here:
How to change the background image through the tag "selected"
(2 answers)
Closed 8 years ago.
So I know this question was, very similarly asked before, however I did not find the answer in that feed as the answer did not work with my other JavaScript.
Here's my problem. I am trying to add in a menu to change the background on a form I am working on. I cannot figure out how to make the background change to an image when an <option> is selected from the <select> field. I would like to accomplish this with just JavaScript, but I will use JQuery if need be.
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onclick="picchange()">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>
You can use a .change event, and smart file naming to achieve this result. Using jQuery is by far the easiest solution.
If you name your images the same as the option values, you can then reference images based off of the current option selected. So for the first option you could name the picture, p1.jpg.
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>
jQuery
$("#pictype").change(function(){
var imageFileName = $(this).val();
$("body").css("background-image", "url(../Images/"+imageFileName+".jpg)");
});
So if you selected option #1, it would set the background image url to url("../Images/p1.jpg");
Here is the jsfiddle: http://jsfiddle.net/mtruty/3L2uP/
Hope this helps!
here is the code:
$( "#pictype" ).change(function(){
if( this.value == "p1" ) //here goes code to change picture
if( this.value == "p2" ) //here goes code to change picture
......
});
Demo: http://jsfiddle.net/Qwnm6/
<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onchange="document.body.style.background = this.value">
<option value="red">pic1</option>
<option value="green">pic2</option>
<option value="blue">pic3</option>
<option value="yellow">pic4</option>
<option value="lime">pic5</option>
<option value="gray">pic6</option>
</select>
Try this. NOTE: I deleted your onclick function calling pictype
HTML
<select id="pictype" name="pictype">
<option value="p1">pic1</option>
<option value="p2">pic2</option>
<option value="p3">pic3</option>
<option value="p4">pic4</option>
<option value="p5">pic5</option>
<option value="p6">pic6</option>
</select>
JavaScript
var selectEl = document.getElementById("pictype");
selectEl.onclick = function () {
if (this.value == "p1") {
document.body.style.backgroundColor = "Black";
}
else {
document.body.style.backgroundColor = "White";
}
}