So I have two of these select menus, and I want the counter to add 1 each time a right selection is selected in each selection. But it stays at 1.. How do I fix this?
HTML:
<div class="row"><!--first row-->
<div class="col-sm-3 col-xs-12 unit" >
<img src="img/shiny-apple.png" id="apple">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div><!-- end of col-->
<div class="col-sm-3 col-xs-12 unit" >
<img src="img/carrot.png" id="carrot">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div><!-- end of col-->
JS:
$("select").change(function() {
$selectedItem = $(this).val();
$imgId = $(this).siblings().attr('id');
var counter = 0;
// if the image ID string includes the selected option string
if ( $imgId.includes($selectedItem) ) {
$(this).parent().css("background-color", "lightgreen");
$(this).prop('disabled', true);
counter++;
console.log(counter);
}
});
var counter = 0;//put counter outside of change so it wont be initialize to 0 every change event
$("select").change(function() {
$selectedItem = $(this).val();
$imgId = $(this).siblings().attr('id');
// if the image ID string includes the selected option string
if ($imgId.includes($selectedItem)) {
$(this).parent().css("background-color", "lightgreen");
$(this).prop('disabled', true);
counter++;
console.log(counter);
}
alert(counter)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<!--first row-->
<div class="col-sm-3 col-xs-12 unit">
<img src="img/shiny-apple.png" id="apple">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div>
<!-- end of col-->
<div class="col-sm-3 col-xs-12 unit">
<img src="img/carrot.png" id="carrot">
<p class="selectby">Fruit</p>
<select>
<option value="default"></option>
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="grapes">grapes</option>
<option value="carrot">carrot</option>
</select>
</div>
<!-- end of col-->
place the counter outside the change event. Because every change event it is initialized to 0 again
Related
I had a select which, depending on the selected option, affected the options from two other selects (which also affected each other between themselves). So far, this was working fine. Here is the code I had:
HTML
<div id="sel" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo">
<option selected>Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
JS
$('.tipo').on("change", function() {
var val = $(this).val();
$(".num-a").html(options1[val]);
$(".num-n").html(options2[val]);
if (val == 1) {
$('.num-a').on("change", function() {
var vara = $(this).val();
$(".num-n").html(optionsIn[vara]);
});
$('.num-n').on("change", function() {
var varn = $(this).val();
$(".num-a").html(optionsIn[varn]);
});
}
if (val == 2) {
// same with different arrays
}
if (val == 3) {
// same with different arrays
}
if (val == 4) {
// same with different arrays
}
});
var options1 = [
array with options 1
];
var options2 = [
array with options 2
];
etc ...
I had to change it, so that instead of only one time, I will have this same code repeated X number of times (depending on an input set by the user), all of which will have the same three selects inside, which will have the same options. So it now looks something like this:
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
...
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
The problem is that with the code I have, whenever I set any of the .tipo options, it affects all of the X .num-a and .num-n selects (also changing any of the .num-a affects all of the .num-n and viceversa), when it should only affect the options of the corresponding nth selects.
I had to chang the first on("change") to $(document).on('change') for the selects to be recognized (found it on another user answer), so the first line of the script is now:
$(document).on('change','.tipo-habitacion-sel', function() {
I'm not very good with js, so this may be something obvious, but I tried several things and can't make it work.
As there mutiple selects in your html code so to refer only the required selects you can use .closest() this will get the closest div eg : sel-val and then use .find method to find select-box where you need append new options
Demo Code :
$(document).on('change', '.tipo', function() {
var val = $(this).val();
//get closest div with class sel-val
var selector = $(this).closest(".sel-val")
//then use find to get required select refernce
selector.find(".num-a").html("<option>0</option><option value='1' >1</option>");
selector.find(".num-n").html(" <option>0</option><option value='1' >1</option>");
//other codes.
});
$(document).on('change', '.num-a', function() {
var vara = $(this).val();
var selector = $(this).closest(".sel-val")
// $(".num-n").html(optionsIn[vara]);
selector.find(".num-n").html("<option>0</option><option value='2'>2</option>");
});
$(document).on('change', '.num-n', function() {
var varn = $(this).val();
var selector = $(this).closest(".sel-val")
//$(".num-a").html(optionsIn[varn]);
selector.find(".num-a").html("<option>0</option><option value='3'>3</option>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
<hr>
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
I've got some jQuery statements which show a div dependant on some selections a user makes from a dropdown/select field.
I was wondering if this is the correct way of doing it? The div showing depends on the answers given in all of the dropdown/select fields (3 selects/dropdowns), but sometimes the div that is only meant to show dependant on that logic shows anyway on other options within the select/dropdown.
Below is my code:
$(function() {
$('.age').on('change', function() {
if ($(this).val() === "col1") {
$('.subject').on('change', function() {
if ($(this).val() === "col1_ge") {
$('.location').change(function() {
$('#sbcox-ge').toggle($(this).val() == 'col1_sbco');
});
} else if ($(this).val() === "col1_ss") {
$('.location').change(function() {
$('#sbcox-ss').toggle($(this).val() == 'col1_sbco');
});
} else {}
});
} else if ($(this).val() === "col2") {} else {}
});
});
$(document).ready(function() {
$("#subject_select").children('option:gt(0)').hide();
$("#area_select").children('option:gt(0)').hide();
$("#age_select").change(function() {
$("#subject_select").children('option').hide();
$("#subject_select").children("option[value^=" + $(this).val() + "]").show()
$("#area_select").children('option').hide();
$("#area_select").children("option[value^=" + $(this).val() + "]").show()
})
})
.inner-modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="decider-form">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="age_select" id="age_select" class="age">
<option value="age-fill">1. Age</option>
<option value="col1">8</option>
<option value="col1">9</option>
<option value="col1">10</option>
<option value="col2">11</option>
<option value="col3">12</option>
<option value="col4">13</option>
<option value="col5">14</option>
<option value="col6">15</option>
<option value="col7">16</option>
<option value="col8">17</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="subject_select" id="subject_select" class="subject">
<option value="subject-fill">2. Subject</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_subject-fill">2. Subject</option>
<option value="col1_ge">GE</option>
<option value="col1_ss">SS</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_subject-fill">2. Subject</option>
<option value="col2_ge">GE</option>
<option value="col2_ss">SS</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
<option value="col4_mss">layout test 4</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="area_select" id="area_select" class="location">
<option value="location-fill">3. Location</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_location-fill">3. Location</option>
<option value="col1_sbco">SBCO</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_location-fill">3. Location</option>
<option value="col2_sbco">SBCO</option>
<option value="col2_sbcc">SBCC</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12" id="button-overall">
<div class="call-to-action">
<a class="call-action" href="#">See Your Course</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See GE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See SS</a>
</div>
</div>
</div>
<!--End Row-->
</div>
<!--End Container-->
</div>
<!--End Decider Form-->
Don't bind event handlers inside other event handlers. Just have the dependent events check the values of the other inputs when they run.
$(function() {
$(".location").change(function() {
var age = $(".age").val();
var subject = $(".subject").val();
if (age == "col1") {
if (subject == "col1_ge") {
$("#sbcox-ge").toggle($(this).val() == "col1_sbco");
} else if (subject == "col1_ss") {
$("#sbcox-ss").toggle($(this).val() == "col1_sbco");
} else {}
} else if (age == "col2") {}
else {}
});
$("#subject_select").children('option:gt(0)').hide();
$("#area_select").children('option:gt(0)').hide();
$("#age_select").change(function() {
$("#subject_select").children('option').hide();
$("#subject_select").children("option[value^=" + $(this).val() + "]").show()
$("#area_select").children('option').hide();
$("#area_select").children("option[value^=" + $(this).val() + "]").show()
})
})
.inner-modal {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="decider-form">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="age_select" id="age_select" class="age">
<option value="age-fill">1. Age</option>
<option value="col1">8</option>
<option value="col1">9</option>
<option value="col1">10</option>
<option value="col2">11</option>
<option value="col3">12</option>
<option value="col4">13</option>
<option value="col5">14</option>
<option value="col6">15</option>
<option value="col7">16</option>
<option value="col8">17</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="subject_select" id="subject_select" class="subject">
<option value="subject-fill">2. Subject</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_subject-fill">2. Subject</option>
<option value="col1_ge">GE</option>
<option value="col1_ss">SS</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_subject-fill">2. Subject</option>
<option value="col2_ge">GE</option>
<option value="col2_ss">SS</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
<option value="col4_mss">layout test 4</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="area_select" id="area_select" class="location">
<option value="location-fill">3. Location</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_location-fill">3. Location</option>
<option value="col1_sbco">SBCO</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_location-fill">3. Location</option>
<option value="col2_sbco">SBCO</option>
<option value="col2_sbcc">SBCC</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12" id="button-overall">
<div class="call-to-action">
<a class="call-action" href="#">See Your Course</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See GE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See SS</a>
</div>
</div>
</div>
<!--End Row-->
</div>
<!--End Container-->
</div>
<!--End Decider Form-->
With a bit of CSS and data-* attribute you can write cleaner code. I added data-column to subject and location. Once age is changed both are populated and then with CSS the options are shown or hidden.
Also, as said with other answers don't nest event handlers. One of the uses of event handlers is to eliminate the need for if/else in some cases.
$(document).ready(function() {
let age_select = $("#age_select");
let subject_select = $("#subject_select");
let area_select = $("#area_select");
age_select.on("change", function() {
let currentCol = jQuery(this).val();
// When age is changed reset other dropdown (by setting value to the default one)
// and trigger change for the event handler to be called
subject_select.attr("data-column", currentCol).val('subject-fill').trigger('change');
area_select.attr("data-column", currentCol).val('location-fill').trigger('change');
});
// if subject is changed reset location and trigger change
subject_select.on("change", function() {
area_select.val('location-fill').trigger('change');
});
area_select.on("change", function() {
let currentLocation = jQuery(this).val();
let subject = subject_select.val();
// If dropdown change is triggers then check if it is default value
// if so then hide links
if (currentLocation == 'location-fill') {
$('#sbcox-ge,#sbcox-ss').toggle(false);
return;
}
// if not default value then show the related link based on subject selection
$('#sbcox-ge').toggle(subject.indexOf("ge") > -1);
$('#sbcox-ss').toggle(subject.indexOf("ss") > -1);
});
})
.inner-modal {
display: none;
}
#subject_select option:not([value='subject-fill']) {
display: none;
}
#area_select option:not([value='location-fill']) {
display: none;
}
#subject_select[data-column='col1'] option[value^='col1'],
#subject_select[data-column='col2'] option[value^='col2'],
#subject_select[data-column='col3'] option[value^='col3'] {
display: block;
}
#area_select[data-column='col1'] option[value^='col1'],
#area_select[data-column='col2'] option[value^='col2'],
#area_select[data-column='col3'] option[value^='col3'] {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="decider-form">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="age_select" id="age_select" class="age">
<option value="age-fill">1. Age</option>
<option value="col1">8</option>
<option value="col1">9</option>
<option value="col1">10</option>
<option value="col2">11</option>
<option value="col3">12</option>
<option value="col4">13</option>
<option value="col5">14</option>
<option value="col6">15</option>
<option value="col7">16</option>
<option value="col8">17</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="subject_select" id="subject_select" class="subject" data-column=''>
<option value="subject-fill">2. Subject</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_ge">GE</option>
<option value="col1_ss">SS</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_ge">GE</option>
<option value="col2_ss">SS</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
<option value="col4_mss">layout test 4</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<select name="area_select" id="area_select" class="location" data-column=''>
<option value="location-fill">3. Location</option>
<!--Below shows when '1 column' is selected is hidden otherwise-->
<option value="col1_sbco">SBCO</option>
<!--Below shows when '2 column' is selected is hidden otherwise-->
<option value="col2_sbco">SBCO</option>
<option value="col2_sbcc">SBCC</option>
<!--Below shows when '3 column' is selected is hidden otherwise-->
<option value="col3_mss">layout 3</option>
<option value="col3_ssm">layout 4</option>
<option value="col3_sms">layout 5</option>
</select>
</div>
<div class="col-lg-3 col-md-3 col-sm-12" id="button-overall">
<div class="call-to-action">
<a class="call-action" href="#">See Your Course</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ge">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See GE</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 inner-modal" id="sbcox-ss">
<div class="call-to-action">
<a class="call-action" href="link here" target="_blank">See SS</a>
</div>
</div>
</div>
<!--End Row-->
</div>
<!--End Container-->
</div>
<!--End Decider Form-->
I have 3 select list in which 1st for x axis and 2nd for y axis with common options in all 3 select list
I want to hide options of 3rd select list which are selected in 1st and 2nd and show remaining
this must happen every time changed the 1st and 2nd select list and show last hidden options.
Please some one help me
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>
I am hiding with this jquery but when i reselect 1st or 2nd select list option
last hidden option is not shown its goes on hinding options
var drop2;
var drop1;
$(document).ready(function(){
$('.DropDown1').on('change',"#DropDown1",function(){
drop1 = $("#DropDown1 option:selected").val();
});
$('.DropDown2').on('change',"#DropDown2",function(){
drop2 = $("#DropDown2 option:selected").val();
});
});
$('.DropDown3').click(function(){
var selector2 = 'DropDown_opt'+drop1;
var selector3 = 'DropDown_opt'+drop2;
$("#"+selector2).hide(selector2);
$("#"+selector3).hide(selector3);
});
You need to unhide the options that are hidden. I added a function to unhide the previously hidden options.
Check the fiddle https://jsfiddle.net/he4wq196/1/
function unhideOptions() {
$('#DropDown3 > option').each(function(){
$(this).show();
});
}
Use .prop("disabled",true) to disable the option or .hide() to hide it.
I've also cleaned your code a bit
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
var drop1, drop2;
$(document).ready(function() {
$(document).on('change', "#DropDown1,#DropDown2", function() {
var d = $(this).attr("id").replace("DropDown","drop");
window[d] = 'DropDown_opt' + $(this).find("option:selected").val();
hideoptions()
});
});
function hideoptions() {
$("#DropDown3 option").prop("disabled", false);
$("#DropDown3 #" + drop1).prop("disabled", true);
$("#DropDown3 #" + drop2).prop("disabled", true);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 form-group DropDown1">
<select class="form-control DropDown" name="DropDown1" id="DropDown1">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-6 col-sm-6 form-group DropDown2">
<select class="form-control DropDown" name="DropDown2" id="DropDown2">
<option value="">Select Options to Search</option>
<option value="11">11</option>
<option value="22">22</option>
<option value="33">33</option>
<option value="44">44</option>
</select>
</div>
<div class="col-md-12 col-sm-12">
<legend>Advanced Search Options</legend>
</div>
<div class="col-md-4 col-sm-4 form-group DropDown3">
<select class="form-control DropDowns" name="DropDown3" id="DropDown3">
<option value="">Select Options to Search</option>
<option id="DropDown_opt11" value="opt11">11</option>
<option id="DropDown_opt22" value="opt22">22</option>
<option id="DropDown_opt33" value="opt33">33</option>
<option id="DropDown_opt44" value="opt44">44</option>
<option id="DropDown_opt55" value="opt55">55</option>
</select>
</div>
I created a function that reads the content of some divs and puts them into an array. My divs are organized as such:
<div class="row clearfix" id="moltiplicandum1">
<div class="column third">
<select id="test_set" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="set1">set1</option>
<option value="set2">set2</option>
</select>
</div>
<div class="column third">
<select id="avail_cat" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="cat1">cat1</option>
<option value="cat2">cat2</option>
</select>
</div>
<div class="column third">
<select id="avail_class" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="class1">class1</option>
<option value="class2">class2</option>
</select>
</div>
</div>
<div class="row clearfix" id="moltiplicandum#">...</div>
From moltiplicandum1 to an arbitrary montiplicandum# (all created via js using a button). So, the function that is going to read the contents of all "select" for each "moltiplicandum" returns an error:
TypeError: div is null
on the line var divs = div.getElementsByTagName('select');. Here the function:
var divArray = [];
for(var i = 1; i < 10; i++) {
var div = document.getElementById("moltiplicandum"+i);
var divs = div.getElementsByTagName('select');
for (var j = 0; j < divs.length; j += 1) {
divArray.push($(divs[j]).val());
}
}
If I comment the external for, defining var i = 1, it works (only for "moltiplicandum1").
Could someone help me to figure out the problem? Thank you1
if you are using jquery why don't you simply use the selector? like this:
selectArray = Array.prototype.map.call($(".moltiplicandum select"),(function(el){
return el.value;
});
I'm not sure what any of the code you've shown has to do with either recursion or AJAX, however given your goal of building an array of all the values from the select elements you can simply use jQuery's map() method.
You can also add a common class to the moltiplicandumN elements so that you can genericise the logic. Try this:
$('.moltiplicandum select').change(function() {
var selectArray = $('.moltiplicandum select').map(function() {
return this.value;
}).get();
console.log(selectArray)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clearfix moltiplicandum" id="moltiplicandum1">
<div class="column third">
<select id="test_set1" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="set1">set1</option>
<option value="set2">set2</option>
</select>
</div>
<div class="column third">
<select id="avail_cat1" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="cat1">cat1</option>
<option value="cat2">cat2</option>
</select>
</div>
<div class="column third">
<select id="avail_class1" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="class1">class1</option>
<option value="class2">class2</option>
</select>
</div>
</div>
<div class="row clearfix moltiplicandum" id="moltiplicandum2">
<div class="column third">
<select id="test_set2" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="set1">set1</option>
<option value="set2">set2</option>
</select>
</div>
<div class="column third">
<select id="avail_cat2" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="cat1">cat1</option>
<option value="cat2">cat2</option>
</select>
</div>
<div class="column third">
<select id="avail_class2" type="text" style="width:100%">
<option selected disabled value="">Select...</option>
<option value="class1">class1</option>
<option value="class2">class2</option>
</select>
</div>
</div>
Also, be careful of duplicating id attributes. I added a numerical value to the id of the repeated select controls in the HTML above.
<select id="Gender" onchange="fctCheck(this.value);">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
<br>
<br>
<select id="men" name="subselector" style="display:none">
<option value="">Choose an item</option>
<option value="tsm">T-Shirt</option>
<option value="lsm">long sleeve</option>
<option value="tankm">Tank Top</option>
<option value="fzhm">Full zip Hood</option>
<option value="pohm">Pull over Hood</option>
<option value="fzfm">Full zip Fleece</option>
<option value="fm">Fleece</option>
</select>
<select id="wemen" name="subselector" style="display:none">
<option value="slw">short sleeve</option>
</select>
<select id="girls" name="subselector" style="display:none">
<option value="shortsg">shorts</option>
</select>
<select id="boys" name="subselector" style="display:none">
<option value="tshirtb">tshirt</option>
</select>
<div style='display:none;' id="wsl">
<div class="colore white" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png">
</div>
<div class="colore black" data-image="http://mebe.co/ford">
</div>
<div class="colore yellow" data-image="http://mebe.co/f150">
</div>
<div class="colore orange" data-image="http://mebe.co/yukon">
</div>
<div class="colore red" data-image="http://mebe.co/370z">
</div>
</div>
<div style='display:none;' id="mtsm">
<div class="colore white active" data-image="http://torcdesign.com/shirts/white.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore black" data-image="http://torcdesign.com/shirts/black.jpg" data-image-back="http://amp.site88.net/shirts/whiteback.jpg">
</div>
<div class="colore yellow" data-image="http://torcdesign.com/shirts/yellow.jpg" data-image-back="http://amp.site88.net/shirts/orange.jpg">
</div>
<div class="colore orange" data-image="http://torcdesign.com/shirts/orange.jpg" data-image-back="http://amp.site88.net/shirts/yellow.jpg">
</div>
<div class="colore red" data-image="http://torcdesign.com/shirts/red.jpg" data-image-back="http://amp.site88.net/shirts/black.jpg">
</div>
</div>
i would like to know how i can display an image on a second page using the information the user selected on drop down i was told to use localstorage but i have not been able to make it work can someone please teach me exactly how to save selection of all the drop downs the user picks? all i need is to save the selection from the previous page and i will take care of the rest.
That should give you a direction:
function save() {
localStorage.setItem("selection", document.getElementById("Gender").value);
}
window.onload = function() {
console.log(localStorage.getItem("selection"));
}
<select id="Gender" onchange="save()">
<option value="">Choose Gender</option>
<option value="men">Men</option>
<option value="wemen">Wemen</option>
<option value="girls">Girls</option>
<option value="boys">boys</option>
</select>
You can save all the values in object and then set it to local storage using .
var vals = {
gender:"male" // object structure example
};
localstorage.setItem('nameforvalues', JSON.stringify(vals));
Than after moving to second page
You can get the object using
var storedvals = local storage.getItem('nameforvalues');
storedvals = JSON.parse(storedvals);