I've got a load of dropdowns on a html page and I want to fire events when they change (eventually it'll be updating all of the dropdowns with content through ajax) - but for now i'm just trying to make it alert out the data element i've selected. I don't want it to fire on every drop down on the page, just the ones with the corresponding css class. I.e. group1 group2. The groups will have to be dynamic too as I don't know how many there could be.
http://jsfiddle.net/6BakA/
Theres a js fiddle above with how it is at the moment. I expect it to only alert 4 times the when you change one of the first 4 dropdowns and only twice when you do the second. But clearly i'm doing something wrong!
My html is:
<select id="test1" class="group1" data-type="Select Box 1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="test1" class="group1" data-type="Select Box 2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="test1" class="group1" data-type="Select Box 3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="test1" class="group1" data-type="Select Box 4">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="test1" class="group2" data-type="Select Box 5">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="test1" class="group2" data-type="Select Box 6">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
My JS is:
$(document).ready(function() {
$('select').change(function() {
$('.group1').each(function() {
alert($(this).data('type'));
});
$('.group2').each(function() {
alert($(this).data('type'));
});
});
});
You can do it like this
$(document).ready(function() {
$('select').change(function() { // <-- bind events to all selects
$('.'+$(this).attr('class')).each(function(){ // <-- iterate through each element that has same class
// you don't need to know the class - just use the current element's class that triggered the event
alert($(this).data('type'));
// do what you need to here
});
});
});
http://jsfiddle.net/wirey00/6BakA/4/
Or even better since you don't know how many selects there'll be, delegating the event will be more efficient since the parent element will be listening and handling the event. You can replace body with any parent element of the select boxes that's available when the dom is loaded
$('body').on('change','select',function(){
$('.'+$(this).attr('class')).each(function(){
alert($(this).data('type'));
// do what you need to here
});
});
http://jsfiddle.net/wirey00/6BakA/5/
You should do it like this:
$(document).ready(function() {
$('select.group1').change(function() {
$('.group1').each(function() {
alert($(this).data('type'));
});
});
$('select.group2').change(function() {
$('.group2').each(function() {
alert($(this).data('type'));
});
});
});
Related
I have three drop down selected values as you can see below.
How can I say for example if car = volvo and color = Black and name = Jone // do something or alert (cool) in JavaScript?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select>
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
It would have been very easy with angular js by two way binding and applying same valuechange listener on all the three dropdowns.
However, here also you can provide 3 different ids to your dropdowns and bind them with same value-change listener using onchange attribute.
In the value-change listener function , get the value of all the 3 drop down value by document.getElementById , comapre them and display alert accordingly. You can find below the sample solution for it which I prepared:
<head>
<script>
function dropdownChange() {
var car=document.getElementById("car").value;
var color=document.getElementById("color").value;
var owner=document.getElementById("owner").value;
if(car==="volvo" && color==="red" && owner ==="james") {
alert("Cool");
}
}
</script>
</head>
<body>
<select id ="car" onchange="dropdownChange();">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select id="color" onchange="dropdownChange();">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="black">black</option>
<option value="green">green</option>
</select>
<select id="owner" onchange="dropdownChange();">
<option value="'mark">'mark</option>
<option value="jones">jones</option>
<option value="james">james</option>
<option value="Vardy">Vardy</option>
</select>
</body>
Example we have this 3 select tags.
select#1 -> Audi
select#2 -> Saab
select#3 -> Audi
so how to check validate all selected value from all select tags while we update it or select it ? and how to prevent it from submit?
HTML
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
You can use jQuery this for getting the validation part. First get the new value which is selected then check with other select tags for their values if it match then trigger duplicate.
Here is a sample JSFiddle
$("select").change(function(){
var newVal = $(this).val();
$(this).siblings().each(function(){
if($(this).val() == newVal)
{
alert("duplicate");
}
});
});
-Help :)
Below is my HTML. I have given multiple option elements in the select tag.
<select class="car" multiple size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
I am able to multi-select by holding the CTRL key. I am able to retrieve the selected values using the following jQuery
$.each($(".car option:selected"), function() {
countries.push($(this).val());
});
How can I unselect the value using jQuery? The selected value will be highlighted as shown:
Thanks in advance
Set the selected property to false: $(selector).prop('selected', false).
I have added a button and attached a click event to be able to demonstrate.
var countries = [];
function unselect() {
$.each($(".car option:selected"), function () {
countries.push($(this).val());
$(this).prop('selected', false); // <-- HERE
});
}
$("#unselect").click(unselect);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="car" multiple size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input type="button" value="unselect" id="unselect" />
You can use $('.car').val([]); for unselect all options in multi-select dropdown.
For multi select value you can pass empty array for unselect all
options.
$(document).ready(function(){
$("#select").click(function(){
var values= [];
$(".car > option").each(function(){
values.push($(this).attr('value'));
});
$('.car').val(values);
});
$("#unselect").click(function(){
$('.car').val([]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="car" multiple size="3">
<option value="volvo" selected>Volvo</option>
<option value="saab" selected>Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button id="select">Select All</button>
<button id="unselect">Unselect All</button>
</button>
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 7 years ago.
Improve this question
I want to search through a select boxes with same class name, to discover if anyone has selected a specific option...
<select class='myclass' id='instance1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance2'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance3'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script>
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (something == 'audi')
alert("found!");
});
Simply take all selected options with :selected pseudo, and filter them by value. This is cool and clean one liner.
$('.myclass option:selected').filter("[value=audi]")
Afterwards, you can grab this in a variable, and check if length > 0. (so you have a selected audi option).
This way:
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (obj.value() == 'audi')
alert("found!");
});
you may need to use the JS code in a function though :)
$('#check').click(function(){
$('.myclass').each(function(i, obj) {
// if anyone wants an audi, let me know
if (obj.value== 'audi'){
alert("found!");
}else{
alert('Not found');
}
});});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="check">Check</button>
<select class='myclass' id='instance1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance2'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class='myclass' id='instance3'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
You will need a button to handle the detection or alternatively you can bind to the select change event handler and handle the newly selected option.
To achieve it via a button click, add the following to your HTML.
<button id="checkSelected">Check for Audi</button>
And then in your JavaScript/jQuery code:
$("#checkSelected").on("click", function() {
$("select[class='myclass'] option:selected").each(function() {
var element = $(this);
if (element.val() === "audi") {
alert('The user has selected an Audi in combobox ' + element.parent().attr("id"));
}
});
});
This will transverse the DOM and select all selected elements for the comboboxes with the class myclass and check if the value is equal to audi and alert the user which box they selected it from.
http://jsfiddle.net/0w0v06et/
I'm new in JavaScript and I have following issue.
In my HTML code is ordinary SELECT
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I need to show TextFied under the SELECT only when user select choice Audi.
<input type="text" name="something">
What is the best way to do that?
Start using JQuery (JQuery).
Here is the javascript:
$(document).ready(function(){
// On Select option changed
$("#someId").change(function(){
// Check if current value is "audi"
if($(this).val() === "audi"){
// Show input field
$("#textInputId").show(); //This changes display to block
}else{
// Hide input field
$("#textInputId").hide();
}
});
});
Here is the HTML
<select id="someId">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="text" style="display:none;" id="textInputId" name="someName"/>
Here is the example on JSFiddle:
EXAMPLE
Do this:
<select id="select">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="hidden" id="txt" name="something">
And do something like this:
select.onchange=function(){
if(select.value=="audi"){
txt.type="text";
}
}
Demo:http://jsfiddle.net/943xQ/
you can achieve it easily using jquery like this:
here is the Html:
<select id="cars">
<option value="-1">Select One</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
and text field:
<input type="text" name="something" id="txtCar" style="display:none;">
$('select#cars').change(function(){
if($(this).val() == "audi")
{
$('input#txtCar').show();
}
});
Here is the DEMO
Place this at the bottom of the page (provided you already have included jquery into this page):
<script>
$('select').change(function () {
if ($(this).val() == 'audi') {
$(this).parent().append('<input type="hidden" name="something">');
}
});
</script>
You can attach the onchange event at select tag and can perform the action you want. Something like
HTML
<div id="result">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
JS
var select = document.getElementById("mySelect");
select.addEventListener("change", function() {
if(this.options[this.selectedIndex].value == 'audi'){
var input = document.createElement('input');
input.type="text";
input.id="txt";
input.name="something";
document.getElementById('result').appendChild(input);
}
});
DEMO
Given the posted HTML, in which you use no specific identifiers (class or id) to identify the relevant elements, and given that you've not specified the availability of any JavaScript library, I'd suggest the following 'plain' JavaScript solution:
function showInputWhen(evt,val){
var el = evt.target;
el.nextElementSibling.style.display = el.value.toLowerCase() == val.toLowerCase() ? 'inline-block' : 'none';
};
var selectEl = document.querySelector('select');
selectEl.addEventListener('change', function(e){
showInputWhen(e,'audi');
});
JS Fiddle demo.
References:
ChildNode.nextElementSibling compatibility.
document.querySelector() compatibility.
EventTarget.addEventListener() compatibility.