从选择框Javascript

时间：2018-08-04 18:17:29

标签： javascript jquery html html5

我希望以上内容以这种方式显示：

 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'}

我尝试使用_.map，但是我一直在获取_.map不是函数。即使我包含lodash.min.js。我真的很想弄清楚如何完成上述工作。提前致谢。所以我想用代码作为上面的示例来付清它们。此外，它们还将显示在页面上的html表中。

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

2 个答案:

答案 0 :(得分：0)

我认为这基本上是您要寻找的。在示例结果中没有显示与复选框相关的任何内容，因此该部分非常不清楚

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>

答案 1 :(得分：0)

以下代码显示了我如何以以下方式显示它：

      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'}

下面的代码有点混乱，但这就是我解决它并使它正常工作的方式

            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>

相关问题
最新问题