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