Filter the dropdown using jquery - javascript

I have a drop down which lists several countries and I want to display only a few countries depending on some conditions.
jquery is as below:
function form_onLoad() {
var countries = "";
if(document.forms[0].countries_new) {
countries = document.forms[0].countries_new.value;
}
}
Dropdown :
<select name="country" size="1">
<option value=""></option>
<option value="1" >Afghanistan</option>
<option value="2" >Albania</option>
<option value="3" >Algeria</option>
<option value="4" >Andorra</option>
<option value="5" >Angola</option>
<option value="6" >Antigua & Deps</option>
<option value="7" >Argentina</option>
<option value="8" >Armenia</option>
<option value="9" >Australia</option>
<option value="10" >Austria</option>
<option value="11" >Azerbaijan</option>
<option value="12" >Bahamas</option>
</select>
Inside the jquery, I want to replace the existing dropdown(above) which has all countries with the countries variable which has only a few options.

You can use JQuery library to achieve it
$('select[name="country"]').find('option').each(function(){
if($(this).text()=='Armenia' || $(this).attr('value')=='12'){
$(this).remove(); //It will remove Armenia and Bahamas
}
});

Related

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>

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>

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>

Prevent selecting same value in three different dropdowns

I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.
Here is the code I am using:
<!DOCTYPE html>
<html>
<head>
<script>
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
</script>
</head>
<body>
<select id="select_1" onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
</body>
</html>
Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?
http://jsfiddle.net/x4E5Q/1/
Try This:
HTML
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="select3" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
JS
$(document).ready(function(){
$("select").change(function() {
$("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
});
});
Demo
See below code
$(document).ready(function() {
$("select").on('hover', function () {
$previousValue = $(this).val();
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
$("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
});
});
$("#confirm-form").submit(function(e) {
e.preventDefault();
$("select").find("option").removeAttr('disabled');
document.getElementById('confirm-form').submit();
});
$(document).ready(function(){
$("select").on('focus', function () {
$("select").find("option[value='"+ $(this).val() + "']").attr('disabled', false);
}).change(function() {
$("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
});
});

drop down list validation

in my form i have three drop down lists to select days. and their corresponding available time. If one selects available day as monday and time morning. then in rest two pair of drop down list morning slot for monday should be disabled. html code is as:
DAY 1:<select id="day1" title="- Select day -" name="wd1" id="wd1" tabindex="14" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 1 : <select name="tslot1" id="tslot1" tabindex="15">
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br><br>
DAY 2:<select id="day2" title="- Select day -" name="wd2" id="wd2" tabindex="16" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 2 : <select name="tslot2" id="tslot2" tabindex="17" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
DAY 3:<select select id="day3" title="- Select day -" name="wd3" id="wd3" tabindex="18" >
<option selected>-select-</option>
<option value="1" >Sunday</option>
<option value="2" >Monday</option>
<option value="3" >Tuesday</option>
<option value="4" >Wednesday</option>
<option value="5" >Thursday</option>
<option value="6" >Friday</option>
<option value="7" >Saturday</option>
</select>
TIME 3 : <select name="tslot3" id="tslot3" tabindex="19" >
<option selected>-select-</option>
<option>Morning(8-12)</option>
<option>Afternoon(12-4pm)</option>
<option>Evening(4-8pm)</option></select><br/><br/>
Please do help me with this problem...
In the HTML for the select tags you have used two id's namely "day1" and "wd1". id is a unique feature of a particular tag.So u can change it with a single id.
i have made the following changes to the HTML page :DAY 1:
<select id="day1" title="- Select day -" name="day1" tabindex="14" >
<option selected>-select-</option>
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>.
so we may refer to the select id "day1" and write a on change function for the necessary validations.
Javascript code:
$(document).ready(function(){
$("#day1").on('change',function() {
var index = $('#day1').get(0).selectedIndex;
alert(index+"index");
$('#day2 option:eq(' + index + ')').attr("disabled","disabled");
$('#day3 option:eq(' + index + ')').attr("disabled","disabled");
});
});
where "day2" and "day3" corresponds to the id of the below select fields with days.
Similarly same approach can be dealt with time too.
Have a look at this script http://plungjan.name/test/unique_days.html
Should help you get started

Categories

Resources