为每个选项值选择默认数组答案

【问题标题】：Select default array from for each in option value为每个选项值选择默认数组
【发布时间】：2016-11-20 04:18:41
【问题描述】：

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

这是我的 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/

谢谢

【问题讨论】：

您可以使用 $('#fromCity option')[1].setAttribute('selected', 'selected'); 如果您可以控制数据集，我会添加一个 selected 属性，然后在构建选择时设置 selected 属性。
@Loktar 哦，谢谢Loktar，我还在学习JavaScript。感谢您的提示

标签： javascript jquery select foreach key

【解决方案1】：

您可以在选择元素中附加 optgroup html 后立即设置该值。

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

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

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

【讨论】：

天哪，这只是增加价值。谢谢@Deep

【解决方案2】：

就像在你的小提琴中一样，只在最后添加这个：

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

经过测试:)

【讨论】：

【解决方案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>

【讨论】：

是的，谢谢@HenryDev 它的工作，我有很多选择它

【解决方案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 来定义最初选择的内容。

【讨论】：