Question

The following code triggers just before a page is loaded. Now I’ve managed to fill a select with values. But I’m not sure on how to make the first value to be the deafault selected value.

$(document).on('pagebeforeshow', '#searchpage',
//This function is the whole function that runs when the pagebefore event occurs
function () {
    //This reads the universities from the api we created
    $.getJSON(AddressAccess + "Home/university/format/json",

    function (data) {
        //The data is sent back in a collection of objects. We need to extract each object and do relative operations
        for (var i = 0; i < data.length; i++) {
            var university = data[i];
            var SelectDropDown = document.getElementById("searchuniversity");
            var NewOption = new Option(university.Name, university.UniverstiyID);

            if (i == 1) {
                SelectDropDown.add(NewOption, Selected);
            } else {
                SelectDropDown.add(NewOption);
            }

        };
    });
});

Now if i use SelectDropDown.add(NewOption,Selected); Only one option is made as an option in the select and what I want is to just make the first option being read from my json data to be the default option appearing in the select.

Answer 1

Set selectedIndex of SelectDropDown to 1:

if (i == 1) {
  SelectDropDown.add(NewOption);
  SelectDropDown.selectedIndex = 1;
}

If you’re really talking about the very first option from the options list, selectedIndex should be 0. The options array of a select element is zero based.

[edit] based on your comment:
maybe the select already contains a blank option. Try:

if (i < 1) {
  SelectDropDown.options.length = 0;
  SelectDropDown.add(NewOption);
  SelectDropDown.selectedIndex = 0;
}