Select default array from for each in option value

Question

I want to set default selected from 'Rome'

here is my 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>')
 })
 })

I try this, but still bug. Anybody help or suggestion? Here's my jsfiddle: https://jsfiddle.net/dedi_wibisono17/0c1js6wa/1/

Thank you

You can use $('#fromCity option')[1].setAttribute('selected', 'selected'); If you have control of the dataset I would add a selected property and go off of that though and set the selected attribute when you build the select. — Loktar
– Loktar, Commented Nov 20, 2016 at 4:25
@Loktar Ohh, thank you Loktar, I still studied JavaScript. Thanks for the tips — dedi wibisono
– dedi wibisono, Commented Nov 20, 2016 at 7:18

Deep · Accepted Answer · 2016-11-20 04:27:35Z

1

you can set the value just after appending the optgroup html in the select element.

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

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

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

answered Nov 20, 2016 at 4:27

Deep

9,7962 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dedi wibisono Over a year ago

oh my god, it's just add value. Thanks @Deep

Chris Dąbrowski · Accepted Answer · 2016-11-20 04:27:25Z

1

Just do like in your fiddle, only add this to the end:

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

Tested :)

answered Nov 20, 2016 at 4:27

Chris Dąbrowski

2,0031 gold badge15 silver badges12 bronze badges

Comments

HenryDev · Accepted Answer · 2016-11-20 04:28:44Z

1

Here's my solution. Hope it helps :)

Just use this:

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

Here's program working:

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>

answered Nov 20, 2016 at 4:28

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

1 Comment

dedi wibisono Over a year ago

yes, thank you @HenryDev it's work, I have many option to choose it

Loktar · Accepted Answer · 2016-11-20 04:32:59Z

If you have control of your data I would add a selected property to it like this,

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

And I would select it the following way.

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

Also note I'm using template literals in this example because they are easier to read but not supported in IE.

live demo

Otherwise you could do something like this

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

live demo

Or set the val like others have said above, (@HenryDev is probably the best one if you take this route). I prefer to use the selected attribute to define whats initially selected.

Collectives™ on Stack Overflow

Select default array from for each in option value

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related