Popup-Dropdown-Auswahl mit Array unter Verwendung von jQuery

Question

Ich versuche, eine Dropdown-Auswahl mit einem Array mit jQuery zu füllen.

Hier ist mein Code:

 // Add the list of numbers to the drop down here 
     var numbers[] = { 1, 2, 3, 4, 5}; 
     $.each(numbers, function(val, text) { 
      $('#items').append(
       $('<option></option>').val(val).html(text) 
      );    
     // END 

Aber ich erhalte eine Fehlermeldung. Jede Funktion ist etwas, was ich von dieser Website habe.

Bombardiert es, weil ich ein eindimensionales Array verwende? Ich möchte, dass sowohl die Option als auch der Text identisch sind.

Answer 1

Try for-Schleifen:

var numbers = [1, 2, 3, 4, 5]; 

for (var i=0;i<numbers.length;i++){ 
    $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items'); 
} 

---

viel besserer Ansatz:

var numbers = [1, 2, 3, 4, 5]; 
var option = ''; 
for (var i=0;i<numbers.length;i++){ 
    option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>'; 
} 
$('#items').append(option); 

Answer 2

Die Array-Deklaration hat eine falsche Syntax. Versuchen Sie, die folgenden statt:

var numbers = [ 1, 2, 3, 4, 5] 

Der Schleifenteil scheint rechts

$.each(numbers, function(val, text) { 
      $('#items').append($('<option></option>').val(val).html(text)) 
      }); // there was also a) missing here 

Wie @Reigel scheint haben ein bisschen mehr Leistung hinzuzufügen (es ist nicht spürbar auf solche kleinen Arrays ist)

Answer 3

Sie können dies auch tun:

var list = $('#items')[0]; // HTMLSelectElement 
$.each(numbers, function(index, text) { 
    list.options[list.options.length] = new Option(index, text); 
}); 

Answer 4

function validateForm(){ 
    var success = true; 
    resetErrorMessages(); 
    var myArray = []; 
    $(".linkedServiceDonationPurpose").each(function(){ 
     myArray.push($(this).val()) 
    }); 

    $(".linkedServiceDonationPurpose").each(function(){ 
    for (var i = 0; i < myArray.length; i = i + 1) { 
     for (var j = i+1; j < myArray.length; j = j + 1) 
      if(myArray[i] == myArray[j] && $(this).val() == myArray[j]){ 
       $(this).next("div").html('Duplicate item selected'); 
       success=false; 
      } 
     } 
    }); 
    if (success) { 
     return true; 
    } else { 
     return false; 
    } 
    function resetErrorMessages() { 
     $(".error").each(function(){ 
      $(this).html(''); 
     });`` 
    } 
} 

Answer 5

Die Lösung, die ich verwendete, war, eine JavaScript-Funktion zu erstellen, die jquery verwendet:

Dies wird ein Dropdown-Objekt auf der HTML-Seite auffüllen. Bitte lassen Sie mich wissen, wo dies optimiert werden kann - aber funktioniert gut wie es ist.

function util_PopulateDropDownListAndSelect(sourceListObject, sourceListTextFieldName, targetDropDownName, valueToSelect) 
{ 
    var options = ''; 

    // Create the list of HTML Options 
    for (i = 0; i < sourceListObject.List.length; i++) 
    { 
     options += "<option value='" + sourceListObject.List[i][sourceListTextFieldName] + "'>" + sourceListObject.List[i][sourceListTextFieldName] + "</option>\r\n"; 
    } 

    // Assign the options to the HTML Select container 
    $('select#' + targetDropDownName)[0].innerHTML = options; 

    // Set the option to be Selected 
    $('#' + targetDropDownName).val(valueToSelect); 

    // Refresh the HTML Select so it displays the Selected option 
    $('#' + targetDropDownName).selectmenu('refresh') 
} 

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

Answer 6

var qty = 5; 
var option = ''; 
for (var i=1;i <= qty;i++){ 
    option += '<option value="'+ i + '">' + i + '</option>'; 
} 
$('#items').append(option); 

Answer 7

Eine Lösung ist Ihre eigene jQuery-Plugin, das nehmen Sie die json Karte und bevölkert die Auswahl damit zu erstellen.

(function($) {  
    $.fn.fillValues = function(options) { 
     var settings = $.extend({ 
      datas : null, 
      complete : null, 
     }, options); 

     this.each(function(){ 
      var datas = settings.datas; 
      if(datas !=null) { 
       $(this).empty(); 
       for(var key in datas){ 
        $(this).append('<option value="'+key+'"+>'+datas[key]+'</option>'); 
       } 
      } 
      if($.isFunction(settings.complete)){ 
       settings.complete.call(this); 
      } 
     }); 

    } 

}(jQuery)); 

Sie können es nennen dies tun:

$("#select").fillValues({datas:your_map,}); 

Die Vorteile ist, dass überall das gleiche Problem konfrontiert sein wird Sie rufen Sie einfach

$("....").fillValues({datas:your_map,}); 

Et voila!

Sie können Funktionen in Ihrem Plugin hinzufügen, wie Sie