如何在jQuery中仅附加数组的部分

Question

我在一个包数组中有12个元素，根据我在input select中附加一定数量的包所需的剂量而定。我怎么能这么做？

我尝试使用for循环，但只看到空生成的选项。任何帮助都是值得赞赏的。

这是数组

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

这是剂量

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

试试这个：

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

以及jquery代码，例如:在我将静态值放入其中进行测试时，添加剂量变量。

$(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 }));
        }
    }
});

Answer 2

您应该使用.append()方法来创建select选项。

此外，应该使用.slice()方法作为新的数组对象返回数组中选定的元素。

对于一个干净的解决方案，我提供了一个名为getOptions的函数，它创建select的选项取决于dosage值。

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

此外，我建议您使用switch语句。

这是整个工作解决方案。

​

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>

​