hide dropdown option on change of another dropdown option - javascript

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>

Related

check a checkbox when dropdown changes for multiple checkbox/select combos

I want to be able to check a checkbox when a dropdown changes. There will be multiple checkbox/dropdown combos which are dynamically created from mySQL based on other selections. I've figured out how to do it for 1 combo, but not for multiple. Will I have to created a function for each combo? Is there a way in jQuery?
Here's my working code for 1 combo. What do I need to do to have multiple checkbox/dropdown combos?
<!DOCTYPE html>
<html>
<body>
<label><input type='checkbox' name='location[]' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' onChange='myCheckbox(this.value)'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<script>
function myCheckbox(val) {
var x = document.getElementById("location_FF");
if (val == "") {
x.checked = false;
} else {
x.checked = true;
}
}
</script>
</body>
</html>
You could do with jquery.closest() function call
$(document).on('change', '.combo select', function() {
let parent = $(this).closest('.combo');
parent.find('input[type=checkbox]').prop('checked', !!$(this).val().trim())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' >
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="combo">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
I think your output structure is not right, you could return your html much better, but I give my solution based on your current output:
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
$('.Selects').change(function() {
$(this).prev('label').children('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<label><input type='checkbox' name='location[]' id='location_FF' class="CheckBoxes" value='FF' /> Front Flat </label>
<select name='addWhat[FF]' id='addWhat_FF' class="Selects">
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
And note that, do not use duplicate ID !
location_FF
Improved version:
$('.Selective select').change(function() {
$(this).parent().find('input[type="checkbox"]').attr('checked', true)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
<div class="Selective">
<label><input type='checkbox' name='location[]' value='FF' /> Front Flat </label>
<select name='addWhat[FF]'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
</div>
Here's a vanilla JS solution if you're interested.
Edit: I noticed the other solutions unchecked the box if you clicked on its label. So I added a preventDefault() to stop that.
var drops = document.querySelectorAll(".dropdown");
for (var i = 0; i < drops.length; i++) {
drops[i].addEventListener('change', (e) => {
var box = e.target.previousElementSibling.firstElementChild;
if (e.target.options[e.target.selectedIndex].value == '') {
box.checked = false;
} else {
box.checked = true;
}
});
}
var labels = document.querySelectorAll("label");
for (var i = 0; i < labels.length; i++) {
labels[i].addEventListener('click', (e) => {
e.preventDefault();
});
}
<label><input type='checkbox' name='location[]' class='location' id='location_FF' value='FF' /> Front Flat </label>
<select name='addWhat[FF]' class="dropdown" id='addWhat_FF'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>
<br>
<label><input type='checkbox' name='location[]' class='location' id='location_BR' value='BR' /> Bottom Round </label>
<select name='addWhat[BF]' class="dropdown" id='addWhat_BR'>
<option value=''> -</option>
<option value='Logo'>Logo</option>
<option value='Nam'>Name</option>
<option value='Num'>Number</option>
<option value='Mon'>Monogram</option>
</select>

How to disable select dropdown if it has one option?

Im wondering how to disable the third dropdown in case it didnt have any options after filtering (Excluding the Select option placeholder option).
I guess that adding a if statment like if and $select3.length could solve the issue but dont know how to implement that along with the filtering in my code since im very new to javascript.
<select name="select1" id="select1">
<option value="" disabled selected>Select your option</option>
<option value="1" option-id="1">Sitzen </option>
<option value="2" option-id="2">Schlafen</option>
<option value="3" option-id="3">Reisen</option>
</select>
<select name="select2" id="select2" disabled>
<option value="a" disabled selected option-id="a">Select your option</option>
<option value="1" option-id="1">Comfort Cushion</option>
<option value="2" option-id="1">Freilagerungssitzkissen</option>
<option value="3" option-id="1">Rückenkissen</option>
<option value="4" option-id="1">Sitzkissen zum Druckmanagement</option>
<option value="5" option-id="1">Wedge Cushion</option>
<option value="6" option-id="1">Wedge Pillow</option>
<option value="7" option-id="2">Comfort Pillow</option>
<option value="8" option-id="2">Dreamy Cushion</option>
<option value="9" option-id="2">Kniekissen</option>
<option value="10" option-id="3">Reise Nackenkissen</option>
</select>
<select name="select3" id="select3" disabled>
<option value="a" disabled selected option-id="a">Select your option</option>
<option value="2" option-id="2" >Standard</option>
<option value="3" option-id="2" >Large</option>
<option value="1" option-id="3" >Small</option>
<option value="2" option-id="3" >Standard</option>
<option value="2" option-id="4" >Standard</option>
<option value="3" option-id="4" >Large</option>
</select>
var $select1 = $( '#select1' ),
$select2 = $( '#select2' ),
$select3 = $( '#select3' ), // I added that line but not sure if its correct
$options_a = $select2.find( 'option' ),
$options_b = $select3.find( 'option' ); // I added that line but not sure if its correct
$select1.on( 'change', function() {
$select2.prop("disabled", false);
$select2.html( $options_a.filter(function () {
return $(this).attr('option-id') === $select1.val() ||
$(this).attr('option-id') === "a"
}))
$select2.val('a')
$select3.val('a')
} )
// I added the next lines for select3 but not sure if they are correct
$select2.on( 'change', function() {
$select3.prop("disabled", false);
$select3.html( $options_b.filter(function () {
return $(this).attr('option-id') === $select2.val() ||
$(this).attr('option-id') === "a"
}));
$select3.val('a')
} )
https://jsfiddle.net/arabtornado/bkm25otw/46/
To achieve this you can set the disabled property on $select3 depending on the number of option elements within it. To do that you can add this line within the change event handler for $select2:
$select3.prop('disabled', $select3.find('option').length == 1);
Note that it's disabled when there's only 1 element, as you always have the 'Select your option' default.
Also worth noting is that option-id is a non-standard attribute, which will mean your HTML is invalid. I would suggest using data attributes instead to maintain validity.
var $select1 = $('#select1'),
$select2 = $('#select2'),
$select3 = $('#select3'),
$options_a = $select2.find('option'),
$options_b = $select3.find('option');
$select1.on('change', function() {
$select2.prop("disabled", false).html($options_a.filter(function() {
return $(this).data('option-id') === parseInt($select1.val(), 10) || $(this).data('option-id') === "a"
})).val('a')
$select3.val('a')
})
$select2.on('change', function() {
$select3.html($options_b.filter(function() {
return $(this).data('option-id') === parseInt($select2.val(), 10) || $(this).data('option-id') === "a"
}));
$select3.prop('disabled', $select3.find('option').length == 1).val('a')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option value="" disabled selected>Select your option</option>
<option value="1" data-option-id="1">Sitzen </option>
<option value="2" data-option-id="2">Schlafen</option>
<option value="3" data-option-id="3">Reisen</option>
</select>
<select name="select2" id="select2" disabled>
<option value="a" disabled selected data-option-id="a">Select your option</option>
<option value="1" data-option-id="1">Comfort Cushion</option>
<option value="2" data-option-id="1">Freilagerungssitzkissen</option>
<option value="3" data-option-id="1">Rückenkissen</option>
<option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option>
<option value="5" data-option-id="1">Wedge Cushion</option>
<option value="6" data-option-id="1">Wedge Pillow</option>
<option value="7" data-option-id="2">Comfort Pillow</option>
<option value="8" data-option-id="2">Dreamy Cushion</option>
<option value="9" data-option-id="2">Kniekissen</option>
<option value="10" data-option-id="3">Reise Nackenkissen</option>
</select>
<select name="select3" id="select3" disabled>
<option value="a" disabled selected data-option-id="a">Select your option</option>
<option value="2" data-option-id="2">Standard</option>
<option value="3" data-option-id="2">Large</option>
<option value="1" data-option-id="3">Small</option>
<option value="2" data-option-id="3">Standard</option>
<option value="2" data-option-id="4">Standard</option>
<option value="3" data-option-id="4">Large</option>
</select>

when any of dropdown menus and radio button changes do something

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">

How to calculate day difference using Angular.js/Javascript

I need one help. I need to calculate difference between two day fields using Angular.js/Javascript.I am explaining my code below.
<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
My second day drop down is given below.
<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
Here i have two dropdown like day from and day to. I need when user will select two day the difference should calculate including those days. Suppose user selected first Monday and wednesday,it should calculate as 3 in difference. Please help me.
If you call the first input dayFrom and the second input dayTo then:
function calculateDifference(dayFrom, dayTo) {
return Math.abs(dayTo + dayFrom) + 1;
}
var difference = calculateDifference($scope.dayFrom, $scope.dayTo);
var difference=abs(parseInt($scope.daysTo)-parseInt($scope.daysFrom))+1;
$('#daysFrom, #daysTo').change(function(){
if ($('#daysTo').val() < $('#daysFrom').val())
{
console.log("Wrong day choose");
return false;
}
console.log($('#daysTo').val() - $('#daysFrom').val()+1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
From : <select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
To : <select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
I do not see any angular so I show how You can manage that in pure js:
(function(){
//private scope
//variables - DOM references
var output=document.querySelector("#output");
var from=document.querySelector("#daysFrom");
var to=document.querySelector("#daysTo");
//error codes
var ERROR_CHOOSE=-1;
var ERROR_DIFF=-2;
//calculates
function calcDiff(){
if (to.value==="" || from.value==="")
return ERROR_CHOOSE;
if (to.value<from.value)
return ERROR_DIFF;
return to.value-from.value+1;
};
//return human results
function display(){
var result=calcDiff();
if (result>0){ //we know no error
if (result==1)
return result+=" day";
else
return result+=" days";
}
//here errors
return result==ERROR_CHOOSE?"Choose both days":"Choose right days";
};
//usage example
from.addEventListener("change",function(){
output.innerText=display();
});
to.addEventListener("change",function(){
output.innerText=display();
});
})();
<select class="form-control" id="daysFrom" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<select class="form-control" id="daysTo" ng-model="daysFrom" ng-change="getSubcategoryValue('daysFrom');">
<option value="" label="Select Day" selected="selected">Select Day</option>
<option value="1" label="Monday">Monday</option>
<option value="2" label="Tuesday">Tuesday</option>
<option value="3" label="Wednesday">Wednesday</option>
<option value="4" label="Thursday">Thursday</option>
<option value="5" label="Friday">Friday</option>
<option value="6" label="Saturday">Saturday</option>
<option value="7" label="Sunday">Sunday</option>
</select>
<div style="margin-top:10px">Current trip length:
<b id="output">Please choose days</b>
</div>

Jquery - Detect click options disabled HTML select

$(function(){
$("select:option").on('click', this, function(event) {
event.preventDefault();
alert("a");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" disabled="disabled">Options 2</option>
<option value="0" disabled="disabled">Options 3</option>
<option value="0" disabled="disabled">Options 4</option>
</select>
I need to check with Jquery, if the user clicked on an option of the selector is disabled, if user clicked display a alert().
Example: A select several options, the options in this select to have a value of 0 is disabled, but if the user clicks on any of these options disabled, we show an alert().
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" disabled="disabled">Options 2</option>
<option value="0" disabled="disabled">Options 3</option>
<option value="0" disabled="disabled">Options 4</option>
</select>
I would greatly appreciate your help!
$(function(){
var options_sel_idx = 0;
$("#options").on("change", this, function(event) {
if($(this.options[this.selectedIndex]).hasClass("disabled")) {
alert("a");
this.selectedIndex = options_sel_idx;
} else {
options_sel_idx = this.selectedIndex;
}
});
});
<style type="text/css">
.disabled {color:#808080;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="options" id="options">
<option value="">Select</option>
<option value="1">Options 1</option>
<option value="0" class="disabled">Options 2</option>
<option value="0" class="disabled">Options 3</option>
<option value="0" class="disabled">Options 4</option>
</select>

Categories

Resources