How to append only parts of an array in jQuery

Question

I have 12 elements in a package array and depending on the dosage I need to append certain amount of packages to input select. How can I do that?

I tried using for loop but I see only empty generated options. Any help is apppreciated.

Here is the array

var packages = [{
        val: '',
        text: 'Package amount
    }, {
        val: 1,
        text: '1 packs'
    }, {
        val: 2,
        text: '2 packs'
    }, {
        val: 3,
        text: '3 packs'
    },  {
        val: 4,
        text: '4 packs'
    }, {
        val: 5,
        text: '5 packs'
    }, {
        val: 6,
        text: '6 packs'
    }, {
        val: 7,
        text: '7 packs'
    }, {
        val: 8,
        text: '8 packs'
    }, {
        val: 9,
        text: '9 packs'
    }, {
        val: 10,
        text: '10 packs'
    }, {
        val: 11,
        text: '11 packs'
    }, {
        val: 12,
        text: '12 packs'
    }];

Here is the dosage

if (dosage === "50mg") {
//1-3 packs here
} else if (dosage === "100mg") {
//2-6 packs here
} else if (dosage === "150mg") {
//3-9 packs here
} else if (dosage === "200mg") {
//4-12 packs here
}

Answer 1

You should use .append() method in order to create select options.

Also, you should use .slice() method in order to return the selected elements in an array, as a new array object.

For a clean solution, I provided a function called getOptions which create select with options depends on the dosage value.

function getOptions(from,to){
     packages.slice(from,to+1).forEach(function(item){
        $('select').append($("<option></option>")
                .attr("value",item.val)
                .text(item.text));
     });
}

Also, I recommend you to use switch statement.

This is entire working solution.

var packages = [
    {
        val: '',
        text: 'Package amount'
    }, {
        val: 1,
        text: '1 packs'
    }, {
        val: 2,
        text: '2 packs'
    }, {
        val: 3,
        text: '3 packs'
    }, {
        val: 4,
        text: '4 packs'
    }, {
        val: 5,
        text: '5 packs'
    }, {
        val: 6,
        text: '6 packs'
    }, {
        val: 7,
        text: '7 packs'
    }, {
        val: 8,
        text: '8 packs'
    }, {
        val: 9,
        text: '9 packs'
    }, {
        val: 10,
        text: '10 packs'
    }, {
        val: 11,
        text: '11 packs'
    }, {
        val: 12,
        text: '12 packs'
    }];
var dosage="100mg";
switch(dosage){
   case "50mg":
      getOptions(1,3);
      break;
   case "100mg":
      getOptions(2,6);
      break;
   case "150mg":
      getOptions(3,9);
      break;
   case "200mg":
      getOptions(4,12);
      break;
}
function getOptions(from,to){
    packages.slice(from,to+1).forEach(function(item){
            $('select').append($("<option></option>")
                    .attr("value",item.val)
                    .text(item.text));
      });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
</select>

Answer 2

try this :

 <select id="packageddl"></select>

and your jquery code like: add your dosage variable as i put a static value in it for testing.

$(document).ready(function () {
    var packages = [{
        val: '',
        text: 'Package amount'
    }, {
        val: 1,
        text: '1 packs'
    }, {
        val: 2,
        text: '2 packs'
    }, {
        val: 3,
        text: '3 packs'
    },  {
        val: 4,
        text: '4 packs'
    }, {
        val: 5,
        text: '5 packs'
    }, {
        val: 6,
        text: '6 packs'
    }, {
        val: 7,
        text: '7 packs'
    }, {
        val: 8,
        text: '8 packs'
    }, {
        val: 9,
        text: '9 packs'
    }, {
        val: 10,
        text: '10 packs'
    }, {
        val: 11,
        text: '11 packs'
    }, {
        val: 12,
        text: '12 packs'
    }];
    // adding a dosage variable static. You can use your own dosage variable.
    var dosage = "50mg";
    if (dosage === "50mg") {
        //1-3 packs here
        for (var i = 0; i <= 3; i++) {
            $('#packageddl').append($('<option>', { value: packages[i].val, text: packages[i].text }));
        }

    } else if (dosage === "100mg") {
        //2-6 packs here
        for (var i = 2; i <= 6; i++) {
            $('#packageddl').append($('<option>', { value: packages[i].val, text: packages[i].text }));
        }
    } else if (dosage === "150mg") {
        //3-9 packs here
        for (var i = 3; i <= 9; i++) {
            $('#packageddl').append($('<option>', { value: packages[i].val, text: packages[i].text }));
        }
    } else if (dosage === "200mg") {
        //4-12 packs here
        for (var i = 4; i <= 12; i++) {
            $('#packageddl').append($('<option>', { value: packages[i].val, text: packages[i].text }));
        }
    }
});