Dynamic option list from an array

Question

I have the following code which works perfectly, but can I make the drop menu dynamic using quantityAllowed as the maximum the drop menu goes to. at the moment I have added 10 options for every print, but what i would prefer is the drop menus only have the correct quantity in. I think the loop I need would go where the options begin using the value of the loop, but when i have tried, i just get an error, so I know I have done something wrong.

function arrayData() {
    var index;
    var text = "<ul>";
    var htmlTable = '';
    var calcTable = [];

    calcTable = [
{ printName:"Name1", printPrice:8000000, quantityAllowed:6}, 
{ printName:"Name2", printPrice:12000000, quantityAllowed:5}, 
{ printName:"Name3", printPrice:20000000, quantityAllowed:4}, 
{ printName:"Name4", printPrice:2000000, quantityAllowed:3}, 



];//end of array

    for (index = 0; index < calcTable.length; index++) {

        var myclass = 'class="printwant"'; 

        $("#tbNames tr:last").after("<tr>" +
        "<td style='padding:0px 0px 0px 36px;'>" + calcTable[index].printName + "</td>" + 
        "<td class='printpoints'>" + calcTable[index].printPrice   + "</td>" +
        "<td>" + calcTable[index].quantityAllowed + "</td>" + 
        "<td><select " + myclass + "><option value=0>0</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><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option></select></td><td></td>      </tr>");

   }//end of loop


$("#tbNames tr:last").after("<tr>" + "<td colspan = '5'  height=40 > </tr>");    
}

"but when i have tried, i just get an error" - What's the error? — Someone
– Someone, Commented Apr 12, 2018 at 15:03
Easiest solution, create your HTML outside of the jQuery assignment -- while creating it, throw the <option... ></option> creation in a loop set to your quantityAllowed. Something funky is probably going on in constructing the HTML where you're also trying to deliver it. Break it down into smaller parts. — Doug
– Doug, Commented Apr 12, 2018 at 15:06
i changed the option bit to ------ "<td><select " + myclass + ">" + for (option = 0; option < calcTable[index].quantityAllowed; option++) { "<option value=" + option + ">" + option + "</option>" } + "</select></td><td></td> </tr>" — Wayne Gilliver
– Wayne Gilliver, Commented Apr 12, 2018 at 15:10

Doug · Accepted Answer · 2018-04-12 15:12:50Z

You can separate out your HTML generation code from the jQuery DOM assignment. This makes it a little easier to read and manipulate. When you come to your select/option area, drop it into a for... loop to generate the appropriate number of options.

function arrayData() {
    var index;
    var text = "<ul>";
    var htmlTable = '';
    var calcTable = [];

    calcTable = [
{ printName:"Name1", printPrice:8000000, quantityAllowed:6}, 
{ printName:"Name2", printPrice:12000000, quantityAllowed:5}, 
{ printName:"Name3", printPrice:20000000, quantityAllowed:4}, 
{ printName:"Name4", printPrice:2000000, quantityAllowed:3}, 



];//end of array

    for (index = 0; index < calcTable.length; index++) {

        var myclass = 'class="printwant"'; 
        var output  = '';
        
        output += "<tr>";
        output += "<td style='padding:0px 0px 0px 36px;'>" + calcTable[index].printName + "</td>";
        output += "<td class='printpoints'>" + calcTable[index].printPrice   + "</td>";
        output += "<td>" + calcTable[index].quantityAllowed + "</td>";
        output += "<td><select " + myclass + ">"; 
        
        
        for( var i=0, x=calcTable[index].quantityAllowed; i<x; i++ ){
          output += '<option value="' + i + '">' + i + '</option>';
        }
        
        
        output += "</select></td><td></td>      </tr>";

        $("#tbNames tr:last").after(output);

   }//end of loop


$("#tbNames tr:last").after("<tr>" + "<td colspan = '5'  height=40 > </tr>");    
}

arrayData();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbNames">
  <tr></tr>
  <tr></tr>
</table>

Collectives™ on Stack Overflow

Dynamic option list from an array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related