Каков наилучший способ добавить параметры для выбора в качестве объекта JS с помощью jQuery? - PullRequest
Новая
       179

Каков наилучший способ добавить параметры для выбора в качестве объекта JS с помощью jQuery?

1305 голосов
/ 05 октября 2008

Каков наилучший способ добавления параметров в <select> из объекта JavaScript с использованием jQuery?

Я ищу что-то, для чего мне не нужен плагин, но я бы также заинтересовался плагинами, которые там есть.

Вот что я сделал: 

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

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

Чистое / простое решение:

Это очищенная и упрощенная версия Matdumsa's : 

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

Изменения от matdumsa: (1) убрал тег закрытия для опции внутри append () и (2) переместил свойства / атрибуты на карту как второй параметр append ().

Ответы [ 34 ]

1 голос
/ 29 марта 2018 
<!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>
0 голосов
/ 17 января 2019

Поскольку JQuery append может принимать массив в качестве аргумента, я удивлен, что никто не предлагал сделать его однострочным с map

$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

или reduce

['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));
0 голосов
/ 30 октября 2017 
$.each(selectValues, function(key, value) {
    $('#mySelect').append($("<option/>", {
        value: key, text: value
    }));
});
0 голосов
/ 08 октября 2015

Я объединяю два лучших ответа в отличный ответ. 

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(''));
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...