Wie nur Teile eines Arrays in jQuery angefügt werden

Question

Ich habe 12 Elemente in einem Paket Array und abhängig von der Dosierung muss ich bestimmte Menge an Paketen an input select anfügen. Wie kann ich das machen?

Ich habe versucht, mit for-Schleife, aber ich sehe nur leere generierte Optionen. Jede Hilfe ist verfügbar. Hier

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

Hier wird die Dosierung

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

versuchen Sie dies:

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

und Ihre jQuery-Code wie: Fügen Sie Ihre Dosis Variable als i a setzen statischer Wert zum Testen.

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

Sie sollten .append() Methode, um select Optionen erstellen verwenden.

Außerdem sollten Sie die Methode .slice() verwenden, um die ausgewählten Elemente in einem Array als neues Array-Objekt zurückzugeben.

Für eine saubere Lösung, stellte ich eine Funktion namens getOptions, die select mit Optionen erstellen, hängt von der dosage Wert.

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

Auch empfehle ich Ihnen switch Anweisung zu verwenden.

Dies ist die gesamte Arbeitslösung.

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>