Get Two Dimensional Array from select boxes Javascript

Question

I want the above to display in this manner:

 csecsub[0][0]={'NYU', 'Additional Mathematics', '3'}

 csecsub[0][1]={'NYU', 'Agricultural Science DA', '1'}

 csecsub[1][0]={'MIT', Agricultural Science DA', '1'}

 csecsub[1][1]={'MIT', Agricultural Science SA', '1'}

I have tried using_.map but i keep getting _.map is not a function. even when i include lodash.min.js. I would really like to figure out how to accomplish the above. Thanks in advance. so with the code i woulde like to dispay them as the above sample. additionally they will be displayed in an html table on the page.

  $(document).ready(function() { $("body").on("click",".add-morecsec",function(){ var html = $(".after-add-morecsec").first().clone(); // $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(html).find(".changecsec").html("<a class='button alert removecsec step fi-minus size-36'> Remove</a>"); $(".after-add-morecsec").last().after(html); }); $("body").on("click",".removecsec",function(){ $(this).parents(".after-add-morecsec").remove(); }); }); $(document).ready(function() { $("body").on("click",".add-morecsec1",function(){ var html = $(".after-add-morecsec1").first().clone(); // $(html).find(".change").prepend("<label for=''>&nbsp;</label><br/><a class='btn btn-danger remove'>- Remove</a>"); $(html).find(".changecsec1").html("<a class='button alert removecsec1 step fi-minus size-36'> Remove</a>"); $(".after-add-morecsec1").last().after(html); }); $("body").on("click",".removecsec1",function(){ $(this).parents(".after-add-morecsec1").remove(); }); }); var acadachieve = $.map($('input[name*="acadachieve"]:checked'), function(e) { return e.value; }); acadachieve = acadachieve .filter(Boolean); var csecsub = $.map($("select[name*=csecsub] option:selected"), function(e) { return e.value; }); csecsub = csecsub.filter(Boolean); for (var i = 0; i < csecsub.length; i++) { if (acadachieve[i] === "csec") { console.log(csecsub[i]); //this is where i cannot get it to show the results i want } } 

 <input type="text" id="School" name='school[0]' placeholder="School/College Name " /> <input id="csec" name="acadachieve[0]" type="checkbox" value="csec" style="margin-left:20px; height: auto;" /> CSEC &nbsp; <input id="cape" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> CAPE &nbsp; <input id="tertiary" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> Tertiary &nbsp; <div class="after-add-morecsec"> <select id="csecsub" name="csecsub[0][]"> <option value="">-Select Subject-</option> <option value="Additional Mathematics">Additional Mathematics</option> <option value="Agricultural Science DA">Agricultural Science DA</option> <option value="Agricultural Science SA">Agricultural Science SA</option> </select> <select id="csecgrade" name="csecgrade[0][]"> <option value="">-Select Grade-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <div class="changecsec"> </div> </div> <a class="success button add-morecsec fi-plus size-36" name="add-morecsec">Add More Subjects</a><br><br> <input type="text" id="School" name='school[0]' placeholder="School/College Name " /> <input id="csec" name="acadachieve[0]" type="checkbox" value="csec" style="margin-left:20px; height: auto;" /> CSEC &nbsp; <input id="cape" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> CAPE &nbsp; <input id="tertiary" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> Tertiary &nbsp; <div class="after-add-morecsec1"> <select id="csecsub" name="csecsub[1][]"> <option value="">-Select Subject-</option> <option value="Additional Mathematics">Additional Mathematics</option> <option value="Agricultural Science DA" selected>Agricultural Science DA</option> <option value="Agricultural Science SA">Agricultural Science SA</option> </select> <select id="csecgrade" name="csecgrade[1][]"> <option value="">-Select Grade-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <div class="changecsec1"> </div> </div> <a class="success button add-morecsec1 fi-plus size-36" name="add-morecsec1">Add More Subjects</a> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 

Answer 1

I think this is basically what you are looking for. There is nothing showing in example results relating to the checkboxes so that part is very unclear

 var $csecsub = $("select[name*=csecsub]"), $csecgrade = $("select[name*=csecgrade]"), results = $.map($csecsub,function(el, i) { return [[el.value, $csecgrade.eq(i).val()]] }) console.log(results) 

 <input id="csec" name="acadachieve[0]" type="checkbox" value="csec" style="margin-left:20px; height: auto;" /> CSEC &nbsp; <input id="cape" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> CAPE &nbsp; <input id="tertiary" name="acadachieve[0]" type="checkbox" value="cape" style="height: auto;" /> Tertiary &nbsp; <select id="csecsub" name="csecsub[0][]"> <option value="">-Select Subject-</option> <option value="Additional Mathematics" selected>Additional Mathematics</option> <option value="Agricultural Science DA">Agricultural Science DA</option> <option value="Agricultural Science SA">Agricultural Science SA</option> </select> <select id="csecgrade" name="csecgrade[0][]"> <option value="">-Select Grade-</option> <option value="1">1</option> <option value="2" selected>2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select id="csecsub" name="csecsub[1][]"> <option value="">-Select Subject-</option> <option value="Additional Mathematics">Additional Mathematics</option> <option value="Agricultural Science DA" selected>Agricultural Science DA</option> <option value="Agricultural Science SA">Agricultural Science SA</option> </select> <select id="csecgrade" name="csecgrade[1][]"> <option value="">-Select Grade-</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected>4</option> <option value="5">5</option> </select> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 

Answer 2

code below shows how i got it to display in the manner below:

      csecsub[0][0]={'NYU', 'Additional Mathematics', '3'}

      csecsub[0][1]={'NYU', 'Agricultural Science DA', '1'}

      csecsub[1][0]={'MIT', Agricultural Science DA', '1'}

      csecsub[1][1]={'MIT', Agricultural Science SA', '1'}

The code below is kind of a mess but this is how i solved it and got it working

  var acadachieve = $.map($('input[name*="acadachieve"]:checked'), function(e) { return e.value; }); acadachieve = acadachieve.filter(Boolean); var school = $.map($('input[name^=school]'), function(e) { return e.value; }); school= school.filter(Boolean); for(var i = 0; i < school.length; i++){ if (acadachieve[i]==="csec") { var $csecsub = $("select[name*=csecsub] option:selected"); var $csecgrade = $("select[name*=csecgrade] option:selected"); var school1 =""; var z=0; var x=0; var loop=0; var results=[]; var results1=[]; var hm=""; var hm1=""; while(z<1){ results = $.map($csecsub,function(el, i) { if($(el).closest('.scoolWrapperClass0').find('input[name*=school]').val()!=undefined && el.value!="" ){ return [[ school1 = $(el).closest('.scoolWrapperClass0').find('input[name*=school]').val(), el.value, $csecgrade.eq(i).val()]] } }); results=results.filter(Boolean); results1 = $.map($csecsub,function(el, i) { if($(el).closest('.scoolWrapperClass1').find('input[name*=school]').val()!=undefined && el.value!=""){ return [[ school1 = $(el).closest('.scoolWrapperClass1').find('input[name*=school]').val(), el.value, $csecgrade.eq(i).val()]] } }); results1=results1.filter(Boolean); //write the result to a table in html hm+=('<tr style="width: 100%;"><th style="border: 2px solid black; color: #2199e8; width: 40%;"> School/College </th> <th style="border: 2px solid black; color: #2199e8; width: 10%;"> Academic Achievment </th><th style="border: 2px solid black; color: #2199e8; width: 30%;"> Subject </th> <th style="border: 2px solid black; color: #2199e8; width: 20%;"> Grade </th></tr>'); z++; } ///loop one for first school for(loop = 0; loop < results.length; loop++){ //alert(results[loop].toString().split(",")); try { ///exception handling //write the result to a table in html hm+=('<tr style="width: 100%;" ><td style="border: 2px solid black; width: 40%;" >'+results[loop].toString().split(",")[0]+'</td> <td style="border: 2px solid black; width: 10%;" >' + acadachieve[i]+ '</td> <td style="border: 2px solid black; width: 30%;" >' + results[loop].toString().split(",")[1] + '</td> <td style="border: 2px solid black; width: 20%;" >' + results[loop].toString().split(",")[2]+ '</td></tr>'); $('#display_achievment').html(hm); } catch (e) { if (!(e instanceof TypeError)) { // The exception is not a TypeError, so throw it again. throw e; } } } ///loop two for second school for(loop = 0; loop < results1.length; loop++){ try { hm1+=('<tr style="width: 100%;" ><td style="border: 2px solid black; width: 40%;" >'+results1[loop].toString().split(",")[0]+'</td> <td style="border: 2px solid black; width: 10%;" >' + acadachieve[i]+ '</td> <td style="border: 2px solid black; width: 30%;" >' + results1[loop].toString().split(",")[1] + '</td> <td style="border: 2px solid black; width: 20%;" >' + results1[loop].toString().split(",")[2]+ '</td></tr>'); $('#display_achievment1').html(hm1); } catch (e) { if (!(e instanceof TypeError)) { // The exception is not a TypeError, so throw it again. throw e; } } } } } <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>