populate first option of dropdown with URL parameter

Question

I am trying to set the first option of a dropdown select based on the URL parameter provided.

I am grabbing the URL parameters using the following code:

var getUrlParameter = function getUrlParameter(sParam) {
  var sPageURL = window.location.search.substring(1),
    sURLVariables = sPageURL.split('&'),
    sParameterName,
    i;

  for (i = 0; i < sURLVariables.length; i++) {
    sParameterName = sURLVariables[i].split('=');

    if (sParameterName[0] === sParam) {
      return typeof sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
    }
  }
  return false;
};

The URL may read as follows:

https://development.mycompany.com/project/home.php?profile=profile1,profle2&region=&rep=JOHN%20BEASLEY

I then can call the getUrlParameter() function to grab the rep parameter:

var rep = getUrlParameter('rep');

console.log(rep);

$('#rep').val(rep); // <-- my attempt to set the first option of the dropdown

I can see the rep variable in the console. However, when trying to set the first option of the dropdown select, it remains blank.

Here is the dropdown:

<select class="form-control rep" id="rep"></select>

I should be able to see 'JOHN BEASLEY' as the selected option in the dropdown.

The dropdown contains 'JOHN BEASLEY', as well as other reps, but it should appear as initially selected. I am perplexed as to why this is not working.

What am I doing wrong and how can I fix it?

*** EDIT ***

I am initially populating the dropdown using the following function:

function initializeSelect($select, uri, adapt){     
$.getJSON( uri, function( data ) {
    $select.empty().append($('<option>'));      
    $.each(data, function(index, item) {
        var model = adapt(item);
        var $option = $('<option>');
        $option.get(0).selected = model.selected;
        $option.attr('value', model.value)
            .text(model.text)
            .appendTo($select);                     
    });
});
};

Then I populate the dropdown like this:

initializeSelect($('#rep'), 'api/getReps.php', function (item){ 
return {
    value: item.fullname,
    text: item.fullname,
    style: 'color:black'
}
});

Using the above, the dropdown is successfully populated with all of the options in my dB table.

The option JOHN BEASLEY is available in the dropdown list.

The <select> shown is empty? Are you trying to create such an <option> or does one already exist with that value? — charlietfl
– charlietfl, Commented Mar 10, 2021 at 15:11
The option already exists in the dropdown. I am trying to get the dropdown to show the selected option as the parameter in the URL. — John Beasley
– John Beasley, Commented Mar 10, 2021 at 15:13
Then please provide the <option> html also as per minimal reproducible example. Another possibility is you are running code shown before the <select> exists — charlietfl
– charlietfl, Commented Mar 10, 2021 at 15:15
@charlietfl - I updated my question to include the function that initially populates the dropdown. — John Beasley
– John Beasley, Commented Mar 10, 2021 at 15:33

n-- · Accepted Answer · 2021-03-10 16:11:42Z

1

maybe you can just set the select.value only after the select is initialized, like this:

function initializeSelect($select, uri, adapt){     
    $.getJSON( uri, function( data ) {
        $select.empty().append($('<option>'));      
        $.each(data, function(index, item) {
            var model = adapt(item);
            var $option = $('<option>');
            $option.get(0).selected = model.selected;
            $option.attr('value', model.value)
                .text(model.text)
                .appendTo($select);                     
        });
        $select.val(getUrlParameter('rep'));
    });
};

answered Mar 10, 2021 at 16:11

n--

3,8466 silver badges11 bronze badges

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

1 Comment

John Beasley Over a year ago

YES!!! That worked! Thank you, sir. I do appreciate it.

Collectives™ on Stack Overflow

populate first option of dropdown with URL parameter

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related