Как сделать раскрывающийся список автоматически выбранным при его динамическом построении

Question

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

$(document).ready(function(){
 var jsonArray=
[
{"ddnVlaue":"Select","id":1},
{"ddnVlaue":"Instant","id":2},
{"ddnVlaue":"Weekly","id":3}
];

$.each(jsonArray, function(key, value) {

var html='<div><select><option>Select</option><option value="Instant">Instant notifications</option><option value="Daily">Daily digests</option><option value="Weekly">Weekly digests</option><option value="NoEmail">No Email</option></select></div><br><br>';
          $("#parent").append(html);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
</div>

В этом примере второй выпадающий список должен выбираться автоматически с мгновенным, а третий с еженедельным

Answer 1

Вы можете достичь этого, используя jQuery. Пожалуйста, проверьте подход ниже.

$(document).ready(function() {
  var jsonArray = [{
      "ddnVlaue": "Select",
      "id": 1
    },
    {
      "ddnVlaue": "Instant",
      "id": 2
    },
    {
      "ddnVlaue": "Weekly",
      "id": 3
    }
  ];

  var selectHTML = `<select>
    <option>Select</option>
    <option value="Instant">Instant notifications</option>
    <option value="Daily">Daily digests</option>
    <option value="Weekly">Weekly digests</option>
    <option value="NoEmail">No Email</option>
  </select>`;

  $.each(jsonArray, function(index, obj) {
    var div = $('<div>');
    div.html(selectHTML);
    div.find('select').val(obj.ddnVlaue);
    $("#parent").append(div);
  });
});

div select {
  margin: 16px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
</div>