Remplir menu déroulant, sélectionnez avec le tableau à l'aide de jQuery

Je suis en train de remplir un menu déroulant, sélectionnez un tableau à l'aide de jQuery.

Voici mon 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

Mais j'obtiens une erreur. La fonction de chaque est quelque chose que je suis débarrassé de ce site web.

Est-il bombardement parce que je suis en utilisant un tableau à une dimension? Je veux à la fois la possibilité et le texte est le même.

Ajoutant des éléments à la fois sur le DOM est très lente et il est fortement déconseillé. De façon plus performatic est de construire une chaîne de caractères et l'ajouter après la boucle

InformationsquelleAutor coson | 2010-08-10

jquery

90

Essayer pour les boucles:
```
var numbers = [1, 2, 3, 4, 5];

for (var i=0;i<numbers.length;i++){
   $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items');
}
```
Bien meilleure approche:
```
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);
```
- ne fonctionne pas pour moi?
- Si le tableau vous devez traiter avec ne sont pas des numéros ou non à partir d'une source sécuritaire, vous devez utiliser la 1ère technique de l'exception à l'aide de .text(number[i]) au lieu de .html(number[i]). Cela permettra d'assurer que vous ne prenez pas le risque d'injection exploits.
InformationsquelleAutor Reigel
38

La déclaration de tableau a une syntaxe incorrecte. Essayez ce qui suit, au lieu de:
```
var numbers = [ 1, 2, 3, 4, 5]
```
La boucle de la partie me semble bon
```
$.each(numbers, function(val, text) {
            $('#items').append( $('<option></option>').val(val).html(text) )
            }); //there was also a ) missing here
```
Comme @Reigel ne semble ajouter un peu plus de performance (il n'est pas visible sur ces petits tableaux)
- C'est la meilleure option si vous avez des clés prédéfinies
InformationsquelleAutor Fabiano Soriani

Vous pouvez également le faire:

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

InformationsquelleAutor Cheeso

Une solution est de créer votre propre plugin jquery qui prennent le json carte et remplir le sélectionner avec elle.

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

Vous pouvez l'appeler en faisant ceci :

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

Avantages est que partout où vous serez confrontés au même problème, vous appelez simplement

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

Et le tour est joué !

Vous pouvez ajouter des fonctions à votre plugin que vous le souhaitez

InformationsquelleAutor florex

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

InformationsquelleAutor Ed Barahona

La solution que j'ai utilisée était de créer une fonction javascript qui utilise jquery:

Cela permettra de remplir une liste déroulante objet sur la page HTML. S'il vous plaît laissez-moi savoir d'où cela peut être optimisé, mais fonctionne très bien comme il est.

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>

InformationsquelleAutor user3912028

-1

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

InformationsquelleAutor srikanth

Vous devez vous connecter pour publier un commentaire.