javascript - array - jquery insert html into select




Qual é a melhor maneira de adicionar opções a uma seleção como um objeto JS com jQuery? (20)

Qual é o melhor método para adicionar opções a um <select> de um objeto JavaScript usando jQuery?

Eu estou procurando por algo que eu não preciso de um plugin para fazer, mas eu também estaria interessado nos plugins que estão por aí.

Foi o que eu fiz:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

Uma solução limpa / simples:

Esta é uma versão simplificada e simplificada do matdumsa :

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('<option>', { value : key })
          .text(value));
});

Mudanças de matdumsa: (1) removeu a tag de fechamento da opção dentro de append () e (2) moveu as propriedades / atributos para um mapa como o segundo parâmetro de append ().


jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

Baunilha JavaScript

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

  1. $.each é mais lento que um loop for
  2. Cada vez, uma seleção DOM não é a melhor prática no loop $("#mySelect").append();

Então a melhor solução é a seguinte

Se os dados JSON resp forem

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

use-o como

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

Ainda outra maneira de fazer isso:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

Em vez de repetir o mesmo código em todos os lugares, sugiro que seja mais desejável escrever sua própria função jQuery como:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Em seguida, para adicionar uma opção, faça o seguinte:

$('select').addOption('0', 'None');

Eu achei que isso é simples e funciona muito bem.

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

Eu combino as duas melhores respostas em uma ótima resposta.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));

Foi o que fiz com arrays bidimensionais: A primeira coluna é o item i, adiciona ao innerHTML da <option> . A segunda coluna é record_id i, adicione ao value da <option> :

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
  2. JavaScript / Ajax

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }

Há um problema de classificação com esta solução no Chrome (jQuery 1.7.1) (o Chrome classifica as propriedades do objeto por nome / número?) Então, para manter o pedido (sim, é objeto abusar), eu mudei isso:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

para isso

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

e então o $ .each será parecido com:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

Igual às outras respostas, na forma jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

Isso é um pouco mais rápido e mais limpo.

$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key,
        text: value
    }));
});

O caminho mais simples é:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

O formato JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

E o código jQuery para preencher os valores para o sucesso do Dropdown on Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

Todas essas respostas parecem desnecessariamente complicadas. Tudo o que você precisa é:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

Isso é completamente compatível com vários navegadores.


Um compromisso entre as duas principais respostas, em um "one-liner":

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

Cria uma matriz de elementos Option usando map e, em seguida, os anexa todos ao Select de uma vez usando apply para enviar cada Option como um argumento separado na função append .


Usando a função $ .map (), você pode fazer isso de uma maneira mais elegante:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

Usando o plugin DOM Elements Creator (meu favorito):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

Usando o construtor Option (não tenho certeza sobre o suporte ao navegador):

$(new Option('myText', 'val')).appendTo('#mySelect');

Usando document.createElement (evitando trabalho extra analisando HTML com $("<option></option>") ):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

Funciona bem com o jQuery 1.4.1.

Para obter um artigo completo sobre o uso de listas dinâmicas com ASP.NET MVC e jQuery, visite: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx


var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

Dessa forma, você "toca no DOM" apenas uma vez.

Eu não tenho certeza se a última linha pode ser convertida em $ ('# mySelect'). Html (output.join ('')) porque eu não sei internals jQuery (talvez ele faz alguma análise no html () método)


 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

Eu fiz alguns testes e isso, acredito, faz o trabalho mais rápido. : P





html-select