Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want that when I select an option from one dropdown,at the same time other dropdown value should change according to the first one.
For example: if I choose 'Value 1' from 'dropdown 1' , then in 'dropdown 2'
it should change automatically to the same value('Value 1').
Can anyone help-me please? I thank you in advance!
Here is my Demo.
DEMO
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
First give identities to the selects
<select name="" id="one">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
Then
jQuery(function ($) {
var $set = $('#one, #two')
$set.change(function () {
$set.not(this).val(this.value)
})
})
Demo: Fiddle
with pure javascript
<select name="test1" id="test1">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="test2" id="test2">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<script>
document.getElementById('test1').addEventListener("change", function () {
document.getElementById('test2').selectedIndex = document.getElementById('test1').selectedIndex;
}, false);
</script>
Fiddle here..
fiddle Demo
$(function () {
var select = $('select.select');
select.change(function () {
select.not(this).val(this.value);
});
});
HTML
added class select and value to options
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
Demo: Fiddle
HTML:
<select name="" id="one">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
jQuery:
$('#one').on('change', function(){
$("#two option").each(function(){
if ($(this).text() == $('#one option:selected').text()) {
$(this).attr('selected',true);
}
});
});
Try this:
$(function(){
$('#s1')[0].selectedIndex = 0;
$('#s1').change(function(){
var index = $(this)[0].selectedIndex;
$('#s2')[0].selectedIndex = index;
});
});
Here's DEMO
You could bind change event for each select. See the demo here:DEMO
$("#select-1").on("change",function(){
$("#select-2").val($(this).val());
})
$("#select-2").on("change",function(){
$("#select-1").val($(this).val());
})
Related
So I want to return a user's form results in a div so they can see what they have chosen underneath the form using JQuery but struggling to use the right code? Ive tried using the .html function and replaceWith. etc but nothing seems to be working?
Here's my html code:
<form id="myform">
<h4>Enter your booking slot here:</h4><br>
<select id="programmes">
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
<option value="test5">Test 5</option>
</select><br><br>
<select id="time">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select><br><br>
<button type="submit" value="Submit Booking">
</form>
</div>
<div></div>
$('#select').on('change', function() {
$('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
<div id="result"></div>
I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>
Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp
In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});
Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.
I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/
No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!
This question already has answers here:
Populating One Select Box Based on the Selection in Another Select Box - JQuery?
(3 answers)
Closed 8 years ago.
I need code either in js or jquery or php like this.
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
If option value 3 is selected, it should populate another select like
<select id="2">
-
-
</select>
if not value 3 is selected nothing happens.
You can do this by hiding and showing the other select depending on the value that is chosen (unless you want to populate the results dynamically after clicking option 3 in which case you will have to be more specific)
HTML
<select id="select1">
<option>Choose One</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select id="select2">
<option>Choose Two</option>
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
CSS
#select2{
display: none;
}
JS
$("#select1").change(function(){
if($(this).val() == 3){
$("#select2").show();
}else{
$("#select2").hide();
}
});
FIDDLE
Here is a PURE Javascript Solution
See this fiddle
Javascript
function myFunction() {
var x = document.getElementById("id1").value;
if (x == "3") document.getElementById("id2").style.display = "block";
}
HTML
<select id="id1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="id2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
CSS
#id2 {
display:none;
}
Use this
Html
<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
Your Jquery Here
$("#1").change(function(){
if($(this).val() == 3){
$("#2").show();
}else{
$("#2").hide();
}
});
Try this..
<select id="1" class="first">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option>
</select>
$(".first").change(function(){
var selectvalue=$(".first").val();
if(selectvalue==3)
{
$("#2").show();
} else {
$("#2").hide();
}
});
I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:
<select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:
<select id="dropdown" name="form" class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option-1</option>
<option value="http://www.google.com">Option-2</option>
<option value="http://www.google.com">Option-3</option>
<option value="http://www.google.com">Option-4</option>
<option value="http://www.google.com">Option-5</option>
</select>
<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>
<select id="dd" name="form">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
<button onClick="launchPage" >
<script>
var launchPage = function() {
var e = document.getElementById("dd");
var url = e.options[e.selectedIndex].value;
window.open(url);
};
</script>