Question

我想设置默认选自'Rome'

这是我的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中不受支持。

live demo

否则你可以做这样的事情

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

live demo

或者像上面所说的那样设置val，（@HenryDev可能是最好的，如果你采取这条路线）。我更喜欢使用selected attribute来定义最初选择的内容。

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

4 个答案: