ansaurus

Question

How do I dynamically set the selected option of a drop-down list using JQuery, Javascript and html?

Answer 1

A:

Your syntax is wrong.

You need to call attr with two parameters, like this:

$('.salesperson', newOption).attr('defaultSelected', "selected");

Your current code assigns the value "selected" to the variable defaultSelected, then passes that value to the attr function, which will then return the value of the selected attribute.

SLaks 2010-02-23 03:18:06

Thanks, But no luck. I have also tried $('.salesperson', addOption).attr('defaultSelected', true);

Eric Hunt 2010-02-23 03:40:59

Answer 2

+4 A:

The defaultSelected attribute is not settable, it's just for informational purposes:

Quote:

The defaultSelected property returns the default value of the selected attribute.
This property returns true if an option is selected by default, otherwise it returns false.

I think you want:

$('option[value=valueToSelect]', newOption).attr('selected', 'selected');

I.e. set the selected attribute of the option you want to select.

Without trying to fix your code, here's roughly how I would do it:

function buildSelect(options, default) {
    // assume options = { value1 : 'Name 1', value2 : 'Name 2', ... }
    //        default = 'value1'

    var $select = $('<select></select>');
    var $option;

    for (var val in options) {
        $option = $('<option value="' + val + '">' + options[val] + '</option>');
        if (val == default) {
            $option.attr('selected', 'selected');
        }
        $select.append($option);
    }

    return $select;
}

You seem to have a lot of baggage and dependencies already and I can't tell you how to best integrate the selected option into your code without seeing more of it, but hopefully this helps.

deceze 2010-02-23 03:47:45

Thanks deceze, But I cant get this to work.

Eric Hunt 2010-02-23 04:33:18

I found another function that was part of this problem. So, I reworded the above question to include the function and hopefully it make more sense. Thanks for all your help so far.

Eric Hunt 2010-02-24 14:28:59

Answer 3

A:

Here is another way you can change the selected option of a <select> element in javascript. You can use

document.getElementById('salesperson').selectedIndex=1;

Setting it to 1 will make the second element of the dropdown selected. The select element index start from 0.

Here is a sample code. Check if you can use this type of approach:

<html>
<head>
<script language="javascript">

function changeSelected() { 
document.getElementById('salesperson').selectedIndex=1;

} 

</script>
</head>
<body>
<form name="f1">

<select id="salesperson" > 
   <option value"">james</option>
   <option value"">john</option>  
</select> 
<input type="button" value="Change Selected" onClick="changeSelected();">

</form>
</body>
</html>

Hetal Vora 2010-02-23 05:20:16

Answer 4

+1 A:

Pardon my ignorance, but why are you using $('.salesperson') instead of $('#salesperson') when dealing with an ID?

Daniel McGrath 2010-02-23 05:32:36

Because I'm new and don't know what I'm doing!

Eric Hunt 2010-02-23 17:55:17

Answer 5

+1 A:

Your code works for me. When does addSalespersonOption get called? There may be a problem with that call.

Also some of your html is a bit off (maybe copy/paste problem?), but that didn't seem to cause any problems. Your select should look like this:

<select id="salesperson"> 
    <option value="">(select)</option> 
</select>

instead of this:

<select id="salesperson" /> 
    <option value"">(select)</option> 
</select>

Edit: When does your options list get dynamically populated? Are you sure you are passing 'on' for the defSales value in your call to addSalespersonOption? Try changing that code to this:

if (selected == "on") { 
    alert('setting default selected option to ' + text);
    html = '<option value="'+value+'" selected="selected">'+text+'</option>'; 
}

and see if the alert happens and what is says if it does happen.

Edit: Working example of my testing (the error:undefined is from jsbin, not my code).

rosscj2533 2010-02-24 14:43:16

I don't know how to find out when addSalespersonOption gets called. Thanks for the typo correction.

Eric Hunt 2010-02-24 15:19:07

Ok, Yes, the alert reads: "setting default selected option to Eric Hunt".

Eric Hunt 2010-02-24 19:18:00

Hmmm, well it seems like that should work for you. I can't tell much more without seeing the rest of your code. I'll post a working example and see if you can tell any difference between it and your code.

rosscj2533 2010-02-24 19:59:44

Thanks rosscj2533, I've never seen an editor like the one you use for the "Working example" before. good stuff. is that open to the public foe use?

Eric Hunt 2010-02-25 11:02:50

Yes it is, just go to http://jsbin.com/ and you can put in any html source with javascript, then click create public link to give anyone access to it. It's real helpful for little demos like the one I posted. Glad you found your problem!

rosscj2533 2010-02-25 18:49:03

ansaurus

tags:

views:

answers:

How do I dynamically set the selected option of a drop-down list using JQuery, Javascript and html?

related questions