I have some logic written for a form where the available items in the second dropdown change based on the first selection.
The drop downs are cloned to allow the user to work with multiples if needed.
The cloned drop downs change if anything is changed in the original drop down. The second field in the cloned options do not respond to change events in the first.
I would like for each cloned set of fields to behave independantly of the other sets of fields. Here is a fiddle: http://jsfiddle.net/HchH8/
Why is this happening? I tried using clone(true, true) for deep copy and it didn't work. I have searched on SO for similar problems and I just can't wrap my head around the answers I'm finding. I am new to this. Can anyone help me please?
jQuery
prods = {
Cookware: ["- Select -", "Round French Oven", "Oval French Oven", "Braiser", "Skillet", "Fry Pan", "Grill Pan", "Saute Pan", "Saucepan", "Saucier", "Griddle", "Roaster", "Stockpot", "Speciality Cookware", "Other"],
Bakeware: ["- Select -", "Covered Casserole", "Baking Dish", "Stoneware Gratin", "Speciality Bakeware", "Individual Bakeware", "Metal Bakeware", "Other"],
KitchenTools: ["- Select -", "Utensils", "Kitchen Accessories", "Cutlery", "Wine Tools", "Textiles", "Other"],
DineEntertain: ["- Select -", "Dinnerware", "Serveware", "Tabletop Accessories", "Glassware", "Kettles", "Tea Collection", "Café Collection", "Other"]
};
var category = $('select[name^="Product_category"]');
var productType = $('select[name^="Product_type"]');
$('.prod-info').live("change", function () {
var catSelected = $(this).val();
$(this).parent("li").next("li.subCats").fadeIn('fast'); /*Fades in next option once selection has been made*/
if($(this).is(category)) {
$('select[name^="Product_type"]').empty();
$('.product-size, .product-color').prop('selectedIndex',0);
$.each(prods[catSelected], function (key, value) {
$('select[name^="Product_type"]')
.append($("<option></option>")
.attr("value", value)
.attr("name", value)
.text(value));
});
}
if($(this).is(productType)) {
$('.product-size, .product-color').prop('selectedIndex',0);
}
});
var otherSelect = $('select');
var select = this.value;
otherSelect.change(function () {
if ($(this).val() == 'Other') {
$(this).next('.other').show();
}
else $(this).next('.other').hide();
});
for (var i = 2; i < 6; i++) { // add counts in a for loop
$('select[name="numProd"]').append('<option value=' + i + '>' + i + '</option>');
}
$.fn.duplicate = function(count, cloneEvents) {
var tmp = [];
for (var i = 0; i < count; i++) {
$.merge(tmp, this.clone(cloneEvents, true, true).get());
}
return this.pushStack(tmp);
};
//SELECT CHANGE FUNCTION (on change get value and clone)
$('select[name="numProd"]').change(function(){ // on change...
var numOfClones = $(this).val() -1; // get value...
var cntr = 2;
$('#addProds').empty(); // empty holder if there are some old clones
$('.prodDetails').duplicate(numOfClones).appendTo('#addProds').each(function() {
$(this).find("select").each(function() {
if (this.name) {
this.name += cntr;
}
if (this.id) {
this.id += cntr;
}
});
++cntr;
});
// duplicate; fill holder with new clones; the class 'new' is just for styling
});
HTML
<form id="warranty">
<div id="prodDetailsContainer">
<label for="numProd">How many products would you like to register (up to 5) <em>*</em></label>
<select name="numProd">
<option>1</option>
</select>
<ul class="prodDetails" id="prod">
<li>
<label for="Product_category">Product Category <em>*</em></label>
<select name="Product_category" class="category prod-info" style="width: 160px;">
<option value="">- Select Category-</option>
<option value="Cookware">Cookware</option>
<option value="Bakeware">Bakeware</option>
<option value="KitchenTools">Kitchen Tools</option>
<option value="DineEntertain">Dine & Entertain</option>
</select>
</li>
<li style="display: none;" class="subCats">
<label for="Product_type">Product Type <em>*</em></label>
<select name="Product_type" class="product-type prod-info"></select>
<div class="other" style="display: none;">
<label for="Other_Product_Type">Specify Other:: </label>
<input class="text-field" name="Other_Product_Type" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_size">Product Size <em>*</em></label>
<select name="Product_size" class="product-size prod-info" style="width: auto; outline: none; width:120px;">
<option value="">- Select Size -</option>
<option value="1_QT">1 qt.</option>
<option value="2_QT">2 qt.</option>
<option value="3-half_QT">3 ½ qt.</option>
<option value="4-half_QT">4 ½ qt.</option>
<option value="5_QT">5 qt.</option>
<option value="Other">Other</option>
<option value="NA">Not Applicable</option>
</select>
<div class="other" style="display: none;">
<label for="Other_Product_Size">Specify Other:: </label>
<input class="text-field" name="Other_Product_Size" />
</div>
</li>
<li style="display: none;" class="subCats">
<label for="Product_color">Product Color <em>*</em></label>
<select name="Product_color" class="product-color prod-info">
<option value="">- Select Color -</option>
<option value="Amethyst">Amethyst</option>
<option value="Aubergine">Aubergine</option>
<option value="Black Onyx">Black Onyx</option>
<option value="Caribbean">Caribbean</option>
</select>
</li>
</ul>
<div id="addProds"></div>
</div>
</form>
I figured it out- the solution was to move the variables inside the .on function, and also make the selectors more specific so that only the next fields were affected by a change in the previous (instead of all of them).
$('select').live('change', function() {
var category = $('select[name^="Product_category"]');
var productType = $('select[name^="Product_type"]');
var catSelected = $(this).val();
var nextProdType = $(this).parent("li").next("li.subCats").children('select[name^="Product_type"]');
var nextSizeColor = $(this).parent("li").next("li.subCats").children('.product-size, .product-color');
$(this).parent("li").next("li.subCats").fadeIn('fast'); /*Fades in next option once selection has been made*/
if($(this).is(category)) {
nextProdType.empty();
nextSizeColor.prop('selectedIndex',0);
$.each(prods[catSelected], function (key, value) {
nextProdType
.append($("<option></option>")
.attr("value", value)
.attr("name", value)
.text(value));
});
}
if($(this).is(productType)) {
nextSizeColor.prop('selectedIndex',0);
}
});
Here is a working fiddle in case this will be helpful to others in the future:
http://jsfiddle.net/xJyL7/1/
Related
I tried dropdown filter based on another dropdown,
It's working If I don't use space in the value in option.
If I use space in value, then it's not working.
$("#Type").on("change", function() {
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value=" + vals + "]").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Diet 1</option>
<option value='Red Banana,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Apple</option>
<option value='Red Banana'>Banana</option>
<option value='Green Apple'>G Apple</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
Here If I select Apple value - Diet 1, it's working.
If I select Diet 2, it should show Banana and G Apple in second drop down.
Please help me how to get the Red Banana value from 1st dropdown and filter the second dropdown,
You weren't far off you just missing closing single quotation marts in this line:
before:
$("#fruits option[value=" + vals + "]").show() /
after
$("#fruits option[value='" + vals + "']").show() /
$("#Type").on("change", function() {
debugger
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value='" + vals + "']").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Diet 1</option>
<option value='Red Banana,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Apple'>Apple</option>
<option value='Red Banana'>Banana</option>
<option value='Green Apple'>G Apple</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
I hope this helps
Biased on you follow up question here is an example of the second drop down bound to an array instead of being hard coded
var data = [{
'value': 'Apple',
'product': 'Green Apple'
}, {
'value': 'Grape',
'product': 'Fresh Grape'
}];
$(function() {
$.each(data, function(index, itemData) {
$('#fruits').append($("<option></option>")
.attr("value", itemData.product)
.text(itemData.value));
});
})
$("#Type").on("change", function() {
var values = $(this).val().split(',', ) //split value which is selected
$("#fruits option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#fruits option[value='" + vals + "']").show() //show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-row last">
<div class="form-wrapper">
<label for="">Department</label>
<select id="Type" name="Type" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
<option value='Fresh Grape'>Diet 1</option>
<option value='Blue Apple,Green Apple'>Diet 2</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
<div class="form-wrapper">
<label for="">Device</label>
<select id="fruits" name="fruits" class='form-control'>
<option disabled="disabled" selected="selected">Choose option</option>
</select>
<i class="zmdi zmdi-chevron-down"></i>
</div>
</div>
I hope this helps
I had a challenge getting this question but tried to research and redo it.
I'm trying to get an item in a list from a controller, then iterate through the list. Based on the content of the array, I would like to show or hide the select that has options in it. I can't seem to hide or show any of them at the moment.
var names = ['marketing']; //or ['business']
var text = "";
var i;
//$(document).ready(function() {
for (i = 0; i < names.length; i++) {
if (names[i] === 'business') {
//alert('Hooray');
$("#business").show("slow");
$(".marketing").hide("fast");
} else
if (names[i] === 'marketing') {
$("#marketing").show("slow");
$(".marketing").hide("fast");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>
If your array contains the exact name of the id you can "hide" the elements with CSS and show them with two lines of javascript
var names = ['marketing'];//or ['business']
names.forEach( name => {
$('#' + name).show('slow')
});
select {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all" id="note">
Some content will be posted here...
</div>
<select id="marketing" multiple>
<option value="1">Definition</option>
<option value="2">Advertise</option>
<option value="3">Promotion</option>
</select>
<select id="business" multiple>
<option value="1">Definition</option>
<option value="2">Buy</option>
<option value="3">Sell</option>
</select>
When we select Anesthesiology in first input, the second input should only show Anesthesiology doctors, when we select Cardiology it should only show Cardiology doctors and so on. Should I use Javascript or jQuery for this? Please help me to find out solution for this. Thank you.
HTML
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
Try use the following example,
This will hide all options and only show those that contains the value from dept dropdown
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
This will then automatic set the first visible element to be selected, so it updates the dropdown of doctors
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
$('#dept').change(function() {
var v = $(this).val()
$("#doctors option").hide()
$("#doctors option:contains(" + v + ")").show()
$('#doctors option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option selected>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
<option>Anesthesiology doctor 1</option>
<option>Anesthesiology doctor 2</option>
<option>Cardiology doctor 1</option>
<option>Cardiology doctor 2</option>
<option>Dermatology doctor 1</option>
<option>Dermatology doctor 2</option>
</select>
</div>
This will update second dropdown when first will change.
(function () {
var $dept = $('#dept');
var $doctors = $('#doctors');
$dept.on('change', onDocSelected)
function onDocSelected() {
var selected = $dept.val();
$doctors.find('option').each(function (i, opt) {
toggle(selected, opt)
});
}
function toggle(selected, opt) {
var isApplicable = opt.text.indexOf(selected) !== -1;
return isApplicable ? $(opt).show() : $(opt).hide();
}
}($))
Apply a class to the options of the second select list - and on change of the first select - hide all optionsand then show only those with the corresponding class.
$(document).ready(function(){
$('#dept').change(function(){
var specialty = $(this).val();
$('#doctors').val(0);
$('#doctors option').hide();
$('.'+ specialty).show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-12">
<label> Select a specialty</label>
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<label> Select a Doctor</label>
<select id="doctors" class="form-control">
<option></option>
<option class="Anesthesiology">Anesthesiology doctor 1</option>
<option class="Anesthesiology">Anesthesiology doctor 2</option>
<option class="Cardiology">Cardiology doctor 1</option>
<option class="Cardiology">Cardiology doctor 2</option>
<option class="Dermatology">Dermatology doctor 1</option>
<option class="Dermatology">Dermatology doctor 2</option>
</select>
</div>
check this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments">
<option></option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
script for above selection
$(document).ready(function(){
var docotors = ['Anesthesiology doctor 1','Anesthesiology doctor 2','Cardiology doctor 1','Cardiology doctor 2','Dermatology doctor 1'];
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#docotrs").empty();
docotors.forEach(function (i) {
if(i.indexOf(selectdDept) >= 0){
$("#doctors").append('<option>'+i+'</option>');
}
});
});
});
If you have doctors name list than create an JSON object by the below method and access it by the selected department value
$(document).ready(function(){
var docotors = {'Anesthesiology':['Anesthesiology doctor 1','Anesthesiology doctor 2'],'Cardiology':['Cardiology doctor 1','Cardiology doctor 2'],'Dermatology':['Dermatology doctor 1']};
$("#dept").on("change",function(){
var selectdDept = $(this).val();
$("#doctors").empty();
if(selectdDept){
var selectedDeptDocotors = docotors[""+selectdDept+""];
selectedDeptDocotors.forEach(function(i){
$("#doctors").append('<option>'+i+'</option>');
});
}
});
});
If you want to do with pure javascript, you may try this
<div class="col-md-4 col-sm-12">
<select id="dept" name="departments" onchange="showOptions(this)">
<option>Select option</option>
<option>Anesthesiology</option>
<option>Cardiology</option>
<option>Dermatology</option>
</select>
</div>
<div class="col-md-4 col-sm-12">
<select id="doctors" class="form-control">
</select>
</div>
SCRIPTS:
var Anesthesiology = [
{ text: "Anesthesiology doctor 1" },
{ text: "Anesthesiology doctor 2" }];
var Cardiology = [
{ text: "Cardiology doctor 1" },
{ text: "Cardiology doctor 2" }];
var Dermatology = [
{ text: "Dermatology doctor 1" },
{ text: "Dermatology doctor 2" }];
function showOptions(e) {
var userSelection = e.options[e.selectedIndex].text;
switch (userSelection) {
case 'Anesthesiology':
options(Anesthesiology);
break;
case 'Cardiology':
options(Cardiology);
break;
case 'Dermatology':
options(Dermatology);
break;
default:
document.getElementById('doctors').innerHTML = "";
break;
}
}
function options(arr) {
var selectList = document.getElementById('doctors');
var len = selectList.options.length;
for (var i = 0; i < arr.length; i++) {
for (j = 0; j < len; j++) {
selectList.options[j] = null;
}
var option = document.createElement("option");
option.text = arr[i].text;
selectList.appendChild(option);
}
}
I have drop-down with options at the end 'others' option is there if we select the 'others' option dynamically text box will appear.but in my problem is, it is multi-select drop down.if you select 'others' and one more option in that drop-down,the text-box is coming.how to get that text-box if you select 'others' option and any other option...
function showfield(name) {
if (name == 'others') {
document.getElementById('div1').innerHTML =
'<input type="text" id="others" name="others" autocomplete="off" />';
}
else {
document.getElementById('div1').innerHTML ='';
}
}
<td>
<select class="outcomes" id="outcomes" name="keyOutcomes"
multiple="multiple" style="width: 310px;"
onchange="showfield(this.options[this.selectedIndex].value)">
<option value="Revenue-top-line">Revenue top-line</option>
<option value="Margin">Margin(CTS/Client)</option>
<option value="Cashflows">Cashflow improvement</option>
<option value="Custome">Customer experience/CSAT</option>
<option value="Demand">Demand Elimination</option>
<option value="Risk">Risk Reduction</option>
<option value="Regulatory_compliance">Regulatory compliance</option>
<option value="others">Others</option>
</select>
<span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div>
</td>
Well first of all you have added the jquery tag but you don't use it in your question, so i will assume you won't mind if the answer will include jquery:
This is a working code (tested) that if others is selected, with or without other options the input is shown:
$("#outcomes").change(function() {
var selected = $(this).val(); //array of the selected values in drop box
for(var i=0; i < selected.length; i++) {
if (selected[i] == "others") {
$("#div1").html('<input type="text" id="others" name="others" autocomplete="off" />');
} else {
$("#div1").html("");
}
}
});
All it does is taking all the values that is selected (select var), loop over them to check if others is one of the selected, if yes then show the input, if no don't show.
Also don't forget to remove the onchange in the html:
<select class="outcomes" id="outcomes" name="keyOutcomes" multiple="multiple" style="width: 310px;">
<option value="Revenue-top-line">Revenue top-line</option>
<option value="Margin">Margin(CTS/Client)</option>
<option value="Cashflows">Cashflow improvement</option>
<option value="Custome">Customer experience/CSAT</option>
<option value="Demand">Demand Elimination</option>
<option value="Risk">Risk Reduction</option>
<option value="Regulatory_compliance">Regulatory compliance</option>
<option value="others">Others</option>
</select> <span id="outcomeaddress" style="margin-top: 29px; margin-left: 275px; color: red;"></span>
<div id="div1"></div
EDIT: This is working because "others" is the last options, so it checks it last every time you select something, here is a code even if "others" is not last option:
$("#outcomes").change(function() {
var selected = $(this).val(); //array of the selected values in drop box
var isSelected = false;
for(var i=0; i < selected.length; i++) {
if (selected[i] == "others") {
isSelected = true;
}
}
if (isSelected) {
$("#div1").html('<input type="text" id="others" name="others" autocomplete="off" />');
} else {
$("#div1").html('');
}
});
I want to make dynamic form field. for instance, depends on the selection of form field, I want to show hidden field or hide showed block.
For example, if I selected first field with 'high school', then show 'Marital Status' field. This field is hidden by default.
See the example code here
Thank you so much!!
Here is HTML
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Check your eligibility</h2>
<h3 class="fs-subtitle">About yourself</h3>
<label for="educationLevel" tabindex="1">Education:<select name="educationLevel" class="pie" id="educationLevel" onchange="myfunction();">
<option value="0">Select an option</option>
<option value="1">High School</option>
<option value="2">College</option>
<option value="3">Grad School</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="yourself">YOUR COUNTRY OF BIRTH:<select name="applicantCountry" id="your-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
<option value="93">Albania</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<label for="maritalStatus" tabindex="2" id="marital">Marital Status:<select name="maritalStatus" class="pie" id="maritalStatus" onchange="myfunction();">
<option value="0">select</option>
<option value="1">YES</option>
<option value="2">NO</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="spouse">YOUR SPOUSE COUNTRY OF BIRTH:<select name="applicantCountry" id="spouse-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
</form>
Here is Javascript
function myfunction(){
var birthSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSelectedCountry);
var country = "-" + birthSelectedCountry + "-";
var eligibleCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var birthSpouseSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSpouseSelectedCountry);
var spouseCountry = "-" + birthSpouseSelectedCountry + "-";
var eligibleSpouseCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var maritalStatus = $("select#maritalStatus option:selected").val();
// console.log(maritalStatus);
var marital = "-" + maritalStatus + "-";
var eligibleMarital = "-1-2-";
var educationLevel = $("#educationLevel option:selected").val();
var education = "-" + educationLevel + "-";
var eligibleEducationLevel = "-2-3-";
console.log(education);
console.log(marital);
console.log(country);
console.log(eligibleEducationLevel.indexOf(education));
console.log(eligibleMarital.indexOf(marital));
console.log(eligibleCountries.indexOf(country));
if( eligibleEducationLevel.indexOf(education) < 0 && eligibleCountries.indexOf(country) < 0 ) {
console.log("Are you married?");
// $('#marital').fadeIn();
$('#marital').css('display', "block");
}
Try this:
JAVASCRIPT
if ($("#educationLevel").val() == "1"){
$("#maritalStatus").show();
} else {
// Do something else..
}
This is if I understood the question correctly.
In your document.ready() event hide all the controls by referencing them by their ids. The document.ready() function is used to initialize the entire behaviour of the entire page.
$(document.ready(function(){
//hide the maritalStatus dropdown initially at pageload.
$('#maritalStatus').hide();
$('#spouse-applicantCountry').hide();
$('#maritalStatus').val(0);
$('#spouse-applicantCountry').val(0);
//This the onchange event of the select
$('#educationLevel').on('change', function() {
$('#maritalStatus').show();
//Put your conditions here
if($('#maritalStatus').val() == "1"){
$('#spouse-applicantCountry').show();
}
});
}));
The dropdown onChange functions wont work properly as expected as the select control is often rendered before the function is defined.
Hope this helps !
Cheers !