when any of dropdown menus and radio button changes do something

when any of dropdown menus and radio button changes do something - javascript

I have here one radio button class="gender" and 3 dropdown menus class="type","model","acc" and one button class="query".
How to click query button when any of values of three dropdown menus changes but not change to empty value and the value of radiobutton is query?
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type select option[value='selectionKey']").attr('selected') == 'selected' && $(".model select option[value='selectionKey']").attr('selected') == 'selected' && $(".acc select option[value='selectionKey']").attr('selected') == 'selected'&& $('.gender input[type="radio"]').attr("value")=="male"){
$('.query').click();
alert('123')
}else{
}
})
})
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

Try this:
$('input[type="radio"], select').click(function(){
alert('hello');
});
Working Fiddle

First of all you need to correct your code :
Change calss to class also for each class of type,model,account you have used same value="option1" which needs to be changed accordingly as
Change this:
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option1">option2</option>
<option value="option1">option3</option>
<option value="option1">option4</option>
<option value="option1">option5</option>
</select>
To this
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
Now answer to your question is :
$(document).ready(function(){
$('.type , .model , .acc').change(function(){
if($(".type :selected").val() != '' || $(".model :selected").val() != '' || $(".acc :selected").val() != ''){
$('.query').click();
alert('123')
}else{
alert('no option is selected);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

1)You need to use .is(':selected') property.
.is() selector check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
2)If you want to get value from radio button you need to use :checked property like this:
if($('.gender:checked').val()=="male"){}
Here is solution :
$('.type , .model , .acc').change(function(){
if($(".type option[value='option1']").is(':selected') && $(".model option[value='option2']").is(':selected') && $(".acc option[value='option3']").is(':selected') && $('.gender:checked').val()=="male"){
$('.query').click();
alert('123');
}else{
}
});
* {
margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gender" type="radio" name="gender" value="male"> Male<br>
<input class="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select class="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select class="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input class="query" type="button" value="Query">

You can do that by checking the selected data value length like this- if (this.value.length > 0) and after that, trigger a click on the button :)
Demo code is given here-
$(document).ready(function()
{
$('#query').click(function()
{
alert("Query Clicked");
});
$('input[type=radio][name=gender], select').on('change', function()
{
if (this.value.length > 0)
{
$('#query')[0].click();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input calss="gender" type="radio" name="gender" value="male"> Male<br>
<input calss="gender" type="radio" name="gender" value="female"> Female<br>
<br>
<select calss="type">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="model">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<select calss="acc">
<option value=""></option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<br>
<input id="query" type="button" value="Query">

Related

Javascript global variable vs. HTML data attribute

When we use $(this).data('options',$('#send1 option').clone());, it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?
First method (works): This code clones data to the data attribute and then filters and copies to both send1 and send2.
$("#receiver").change(function() {
if ($(this).data('options') == undefined) {
/* Takes an array of all options-2 and kind of embeds it in select1 */
$(this).data('options',$('#send1 option').clone());
}
if ($(this).data('options-2') == undefined) {
$(this).data('options-2',$('#send2 option').clone());
}
var id1 = $(this).val();
console.log(id1);
var options1 = $(this).data('options').filter('[value=' + id1 + ']');
var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h5>Hello ListBox</h5>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>
Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver. Then, I copy the a result to both send1 and send2.
var a = $('#send1 option').clone();
$("#receiver").change(function() {
var id1 = $(this).val();
console.log(id1);
var options1 = a.filter('[value=' + id1 + ']');
$('.send1 ').html(options1);
$('.send2 ').html(options1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<select name="Receiver" id="receiver">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<select class="send2" name="ShipFrom2" id="send2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</div>

I don't think you are using the best method for this ...
I suggest:
function setOption() {
var receiverVal = $('#receiver').val()
$('#send1 option:not(.'+receiverVal+')').hide();
$('#send2 option:not(.'+receiverVal+')').hide();
$('#send1 option.'+receiverVal).show();
$('#send2 option.'+receiverVal).show();
$('#send1 option:visible').first().attr('selected', 'selected');
$('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();
$("#receiver").change(setOption)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<select name="Receiver" id="receiver">
<option value="fruit" >Fruit</option>
<option value="animal">Animal</option>
<option value="bird" >Bird</option>
<option value="car" >Car</option>
</select>
<select class="send1" name="ShipFrom1" id="send1">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>
<select class="send2" name="ShipFrom2" id="send2" class="bird">
<option value="10" class="fruit" >Banana </option>
<option value="11" class="fruit" >Apple </option>
<option value="12" class="fruit" >Orange </option>
<option value="21" class="animal" >Wolf </option>
<option value="22" class="animal" >Fox </option>
<option value="23" class="animal" >Bear </option>
<option value="31" class="bird" >Eagle </option>
<option value="32" class="bird" >Hawk </option>
<option value="41" class="car" >BWM <option>
</select>

Check whether selected option has no value, across multiple select fields

When I try the below jQuery, I get an error:
Unexpected Type Error (: $selReqs[i].val is not a function)
I have tried multiple variations of the below and cannot seem to get it to check if selected option has no value for each of the select fields. Any advice appreciated!
var $selReqs = $('.allMinReqs');
var reqs = [];
for(var i=0; i < $selReqs.length; i++) {
if(!$selReqs[i].val()) {
reqs.push($selReqs[i]);
}
}
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin" onchange="showMcStart();">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

The issue in your code is because you're accessing a jQuery object by index. This returns the underlying DOM Element object which has no val() method.
To achieve your goal you could use map() to create an array of all the selected values. Then you can check the length of that array to determine if anything was selected, like this:
$('button').on('click', function() {
var values = $('.allMinReqs').map((i, e) => e.value !== '' ? e.value : null).get();
console.log(values);
var somethingSelected = values.length != 0;
console.log(somethingSelected);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Check</button>
<div id="minReqs">
<div class="hide" id="singleMin_mcReq"><br>
<label for="singleMin">Minimum requirement for each skill: <span class="required">*</span> </label>
<select class="allMinReqs" id="singleMin">
<option value="">Please Select</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
</select>
</div>
<div class="hide" id="multiMin_mcReq"><br>
<label for="curL">Listening requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_L">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>
<label for="curR">Reading requirement: <span class="required">*</span> </label>
<select class="allMinReqs" id="mcReq_R">
<option value="">Please Select</option>
<option value="4">4.0</option>
<option value="4.5">4.5</option>
<option value="5">5.0</option>
<option value="5.5">5.5</option>
<option value="6">6.0</option>
<option value="6.5">6.5</option>
<option value="7">7.0</option>
<option value="7.5">7.5</option>
<option value="8">8.0</option>
<option value="8.5">8.5</option>
<option value="9">9.0</option>
<option value="9.5">9.5</option>
</select>

Replace value from select inside hidden input

The main mission was to add the values from two select dropdowns to one hidden input. That works great but now if a user decides to choose another input, it adds to the hidden input value rather than replace it.
Live Code: DEMO
$('#expireMM').change(function() {
var theMonth = $(this).val();
$("#expiry").val( theMonth )
})
$('#expireYY').change(function() {
var theYear = $(this).val();
$('#expiry').val($('#expiry').val() + "/" + theYear );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

You can update the value of the #expiry input in an external function, and not based on the current value:
function getExpirationDate() {
var monthVal = $('#expireMM').val();
var yearVal = $('#expireYY').val();
if (monthVal && yearVal) {
$('#expiry').val(`${monthVal}/${yearVal}`);
} else if (monthVal) {
$('#expiry').val(monthVal);
}
console.log($('#expiry').val());
}
$('#expireMM').change(getExpirationDate)
$('#expireYY').change(getExpirationDate)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="expireMM" id="expireMM" >
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY" >
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" />

$("#expiry").val($("#expireMM").val() + "/" + $("#expireYY").val())

Why not generate you expiry input value on form submit?
Here is the code.
jQuery(document).ready(function($) {
$("#my-form").submit(function() {
var monthYearVal = $('#expireMM').val() + "/" + $('#expireYY').val();
$("#expiry").val(monthYearVal);
$(this).submit();
return false;
});
});
<form id="my-form" method="POST">
<table class="table">
<tr>
<td>
<select name="expireMM" id="expireMM">
<option value="">Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="expireYY" id="expireYY">
<option value="">Year</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
</select>
<input class="inputCard" type="hidden" name="expiry" id="expiry" maxlength="4" /></tr>
</td>
<tr>
<tr>
<td colspan="2" align=center>
<input type="hidden" name="cvv">
<input class="right-col-inner-box" type="submit" value="Submit">
</td>
</tr>
</table>
</form>

How to show a div when an option is selected [duplicate]

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!

hide dropdown option on change of another dropdown option

I have tried this, but not working fine. HTML:
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
SCRIPT:
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option[value!="+val+"]").remove();
}
in place of .remove() I tried .hide() which seems to be not working. Could anyone help me out with this?

You should show all options before hide.
function myFunction()
{
$variable=$("#size").html();
$("#size").html($variable);
var val=$("#color").find(":selected").val();
$("#size option").show();
$("#size option[value!="+val+"]").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<select id="color" name="color" onchange="myFunction()">
<option value=""> choose options </option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size" >
<option value=""> choose options </option>
<option value="3" class="27">Apple </option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>

You can make a mix of JS and CSS.
So we "reset" the size select, by removing all the disabled and also the selected.
Something like this:
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").val();
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[value!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1">AB</option>
<option value="2">ABC</option>
<option value="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27">Apple</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="2" class="26">Orange</option>
<option value="3" class="28">Grapes</option>
</select>
</div>
Edit 1:
Using data-group instead of class or value
$(document).ready(function () {
var colors = $('#color'),
size = $('#size');
colors.change(function () {
var val = $(this).find(":selected").attr('data-group');
size.find('option').removeAttr('disabled');
size.find('option:selected').removeAttr('selected');
size.find("option[data-group!=" + val + "]").attr('disabled', 'disabled');
})
})
option:disabled {
display: none;
}
option:first-child {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="color" name="color">
<option value="">choose options</option>
<option value="1" data-group="1">AB</option>
<option value="2" data-group="2">ABC</option>
<option value="3" data-group="3">ABCD</option>
</select>
<select id="size" name="size">
<option value="">choose options</option>
<option value="3" class="27" data-group="3">Apple</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="2" class="26" data-group="2">Orange</option>
<option value="3" class="28" data-group="3">Grapes</option>
</select>
</div>

Develop Reference

JavaScript is the programming language of the Web.

when any of dropdown menus and radio button changes do something - javascript

Try this: $('input[type="radio"], select').click(function(){ alert('hello'); }); Working Fiddle

Related

Javascript global variable vs. HTML data attribute

Check whether selected option has no value, across multiple select fields

Replace value from select inside hidden input

How to show a div when an option is selected [duplicate]

hide dropdown option on change of another dropdown option

Categories

Resources