Using select2.js I have a dropdown menu that works great except for one thing: On load I cannot click on the first option in the dropdown menu and have it show as the current selection. When clicking on the first option, nothing happens and if the dropdown loses focus, the placeholder fills the box. If any other of the 40 options are selected, that value text is displayed in the dropdown box and I can use that value in my app.

After an option (other than the 1st one) is selected and I click on the first option again, then the first option value is displayed in the box and I can use it without issue. This issue occurs only on load.

JS

$('.selectArea').select2({
        placeholder: 'Area #',
        allowClear: true,
        disabled: false
    });

I have filled the dropdown using a local json file:

$.getJSON('areaList.json', function(json) {
        for(i =  0; i < json.length; i++){
            $('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
        }
    });

HTML

<select class="selectArea" style='width: 120px; font-family: Arial'></select>

My goal is to be able to load the page with the placeholder in the dropdown box, then be able to click the first option and have it fill the box so I can use that value for other parts of the app.

Any help would be greatly appreciated.

Using select2.js I have a dropdown menu that works great except for one thing: On load I cannot click on the first option in the dropdown menu and have it show as the current selection. When clicking on the first option, nothing happens and if the dropdown loses focus, the placeholder fills the box. If any other of the 40 options are selected, that value text is displayed in the dropdown box and I can use that value in my app.

After an option (other than the 1st one) is selected and I click on the first option again, then the first option value is displayed in the box and I can use it without issue. This issue occurs only on load.

JS

$('.selectArea').select2({
        placeholder: 'Area #',
        allowClear: true,
        disabled: false
    });

I have filled the dropdown using a local json file:

$.getJSON('areaList.json', function(json) {
        for(i =  0; i < json.length; i++){
            $('<option>').attr('value', json[i].MGNT_AREA).text(json[i].MGNT_AREA).appendTo('.selectArea');
        }
    });

HTML

<select class="selectArea" style='width: 120px; font-family: Arial'></select>

My goal is to be able to load the page with the placeholder in the dropdown box, then be able to click the first option and have it fill the box so I can use that value for other parts of the app.

Any help would be greatly appreciated.

• javascript
• jquery
• json
• drop-down-menu
• jquery-select2

• In order to display a default value in the dropdown, you need selected="selected" attribute added to the option element. – DinoMyte Commented Jan 29, 2016 at 21:27
• I tried: '$('select option:first-child').attr('selected', 'selected');' and it did not do the trick. – user5543624 Commented Jan 29, 2016 at 22:36

2 Answers 2

You need to trigger the change event after adding new options to an empty drop down.

I was unable to remove the first option as selected, the attribute selected is not even rendered in web inspector. I was forced to remove the first option as selected because my validation was failing on select2.

What I did to solve the issue is:

After populating the options, I added a new option on top of all the other options and added the selected attribute to it. Immediately after that, I've remove it: Code below:

$(".countries").prepend('<option selected class="placeholdered" value="">Select from the list of countries</option>');
$('.countries').select2().trigger('change');
$('.countries option').removeAttr('selected');

Please notice that I've triggered a select2 change before removing the selected. No need for placeholder...