CODEWITHSUNDEEP
javascriptajaxjquery-mobileselect
Niki Ernst
Niki Ernst

Reputation: 30

How to make a <option> default selected for a ajax-filled <select> with JQueryMobile?

I fill my <select> with the response from ajax call.

Here's the JS code:

var myOptions = {val1 : project1,
                 val2 : project1,
                 val4 : project1,
                 val5 : project1,
                 };

                 $.each(myOptions, function(val, text) {
                 $('#projectid').append(
                 $('<option ></option>').val(val).html(text)
                 );
                 });

my html code:

<input type="hidden" name="ehidden" value="true">
  <select name="project" id="projectid"></select>

The required DropDown list I get is ok, but I can't set the first <option> to default selected.

Here's some code I already tried:

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

I got no error, but also no result. The same with this one:

$("#projectid").val($("#projectid option:first").val());

Second Problem:

the first <option> is not available the first time I select it per mouseclick, I have to first select the second <option> and then the first again.

Upvotes: 1

Views: 2795

Answers (2)

catalyst294
catalyst294

Reputation: 129

There are a few improvements you can make to your code that will make it simpler and allow you to easily mark the selected option. Here is a jsfiddle to solve your problem: jsfiddle

var myOptions = [
    { name: "A", value: "val1", selected: true},
    { name: "B", value: "val2"},
    { name: "C", value: "val3"},
    { name: "D", value: "val4"}
];

var optionsHtml = "";
for(var i = 0; i < myOptions.length; i++) {
    var val = myOptions[i];
    optionsHtml += '<option value = "' + val.value + '"';

    if(val.selected)
        optionsHtml += 'selected="' + val.selected + '"';

    optionsHtml += '>' + val.name + '</option>';
}

$('#projectid').append(optionsHtml).selectmenu('refresh', true);;

Explanation

You will want to just build the html for your options and then appending to all the selects once. This will improve the performance of your code because you will only be appending once, thus causing the browser to do one redraw.

Doing it this way you can build the options as a string. I don't know how you determine which option to select but you should be able to change the if clause to suit your needs.

What you tried

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

This will not work because your selector is wrong. You are using the id as a class here you want: $('#projectid')

$("#projectid").val($("#projectid option:first").val());

I'm not sure why this does not work. But you would not want to do it this way because it would be hard to select the option dynamically.

EDIT

To get the select in jQuery Mobile to update its selection you must call refresh. See the documentation here.

Upvotes: 0

Grinn
Grinn

Reputation: 5528

Your selector is wrong on this line:

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

That is selecting a drop-down with a class of projectid. It should be:

$('#projectid').find('option[value="val1"]').prop('selected', true);

...which will select the element with an id of projectid.

Concerning this code:

$("#projectid").val($("#projectid option:first").val());

I'm not sure what you intended it to do, but it will select the first option in the drop-down. If no other option is selected, the first one is selected by default. So, if you were to run this code when the page loads, it of course would do nothing since the first option is already selected.

Concerning your "second" problem, you need to post that as a separate question as it's unrelated to this one. But, be sure to search for an answer to it here on SO before you pose it.

Upvotes: 1

Related Questions