Wählen Sie Standard-Array von für jeden in Optionswert

Question

Ich möchte Standard von

‚Rome‘ ausgewählt setzen hier ist mein 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>') 
}) 
}) 

Ich versuche dies, aber immer noch Fehler. Irgendwelche Hilfe oder Anregung? Hier ist meine jsfiddle: https://jsfiddle.net/dedi_wibisono17/0c1js6wa/1/

Danke

Answer 1

Sie den Wert festlegen können nur nach dem Anhängen der optgroup html im Select-Element.

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

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

Fiddle: https://jsfiddle.net/5gpbvhff/

Answer 2

Genau wie in Ihrer Geige zu tun, fügen nur diese bis zum Ende:

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

getestet :)

Answer 3

Hier ist meine Lösung. Hoffe, es hilft :)

Nur diese verwenden:

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

Hier Programm arbeiten:

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

Wenn Sie die Kontrolle über Ihre Daten haben möchte ich hinzufügen, eine ausgewählte Eigenschaft dazu,

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

Und ich würde es auf die folgende Weise auswählen.

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

Beachten Sie auch, ich bin mit template literals in diesem Beispiel, weil sie leichter zu lesen sind, aber nicht in IE unterstützt.

live demo

Sonst könnte man so etwas wie dieses

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

live demo

tun Oder die val gesetzt wie andere oben gesagt haben, (@HenryDev ist wahrscheinlich das beste, wenn Sie nimm diesen Weg). Ich bevorzuge die selected attribute zu definieren, was anfänglich ausgewählt wurde.