从每个in选项值中选择默认数组

Question

我想设置从“罗马”中选择的默认设置

这是我的js

var listCity = {
 "Popular": [
              { "cityname": "London", "code": "LDN" },
              { "cityname": "Rome", "code": "ROM" },
              { "cityname": "Madrid", "code": "MDR" }
            ],
 "Germany":[
              { "cityname": "Hamburg", "code": "HMB" },
              { "cityname": "Frankfurt", "code": "FRN" }
           ]
}

Object.keys(listCity).forEach(function(key) {
  var $group = $('<optgroup label="' + key + '"></optgroup>');

listCity[key].forEach(function(obj) {
 $group.append('<option value="' + obj.code[1] + '">' + obj.cityname + '</option>')
 })
 })

我尝试了这个，但还是有问题。 有人帮助或建议吗？ 这是我的jsfiddle： https ://jsfiddle.net/dedi_wibisono17/0c1js6wa/1/

谢谢

Answer 1

就像在小提琴中一样，仅将其添加到最后：

$('#fromCity').val('ROM');

经过测试:)

Answer 2

您可以在将selectgroup html附加到select元素之后，立即设置值。

 $('#fromCity').append($group);

  $('#fromCity').val("ROM");

小提琴： https : //jsfiddle.net/5gpbvhff/

Answer 3

这是我的解决方案。 希望能帮助到你 ：）

只需使用此：

 $('select option[value="ROM"]').prop("selected",true);

这是程序的工作方式：

 var listCity = { "Popular": [ { "cityname": "London", "code": "LDN" }, { "cityname": "Rome", "code": "ROM" }, { "cityname": "Madrid", "code": "MDR" } ], "Germany": [ { "cityname": "Hamburg", "code": "HMB" }, { "cityname": "Frankfurt", "code": "FRN" } ] } Object.keys(listCity).forEach(function(key) { var $group = $('<optgroup label="' + key + '"></optgroup>'); $('select option[value="ROM"]').prop("selected",true); listCity[key].forEach(function(obj) { $group.append('<option value="' + obj.code + '">' + obj.cityname + '</option>') }) $('#fromCity').append($group); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <select name="" id="fromCity"></select> 

Answer 4

如果您可以控制数据，则可以向其中添加一个选定的属性，

  {
   "cityname": "Rome",
    "code": "ROM",
    "selected": true
  },

我将通过以下方式选择它。

  listCity[key].forEach(function(obj) {
    const selected = obj.selected ? 'selected' : '';
    $group.append(`<option ${selected} value="${obj.code}">${obj.cityname}</option>`);
  });

还要注意，在此示例中我使用template literals ，因为它们更易于阅读，但在IE中不受支持。

现场演示

否则你可以做这样的事情

$('#fromCity option')[1].setAttribute('selected', 'selected');

现场演示

或像上面其他人所说的那样设置val（@HenryDev如果采用此路线，可能是最好的）。 我更喜欢使用selected属性来定义最初选择的内容。