Geek Answers Handbook

How to dynamically set a selected parameter in a drop-down list using jQuery, javascript and html?

For some reason I can't get this to work.

The list of my options is populated dynamically using these scripts:

function addOption(selectId, value, text, selected) { var html = '<option value="'+value+'">'+text+'</option>'; if (selected == "on") { html = '<option value="'+value+'" selected="selected">'+text+'</option>'; } $('#'+selectId).append(html); } function addSalespersonOption(id, name, defsales) { addOption('salesperson', id, name, defsales); }

Here is the html:

 td class="text-r"><label for="salesperson">Salesperson:</label></td> <td> <select id="salesperson"> <option value="">(select)</option> </select> </td>

So far, the output is:

 <option value="1266852143634" selected="selected">Eric Hunt</option>

The DOM shows this:

 index 2 disabled false value "1266852143634" text "Eric Hunt" selected false defaultSelected true

But for some reason, when the page loads, the dropdown does not display Eric Hunt as preselected. Nothing like this.

how can i get "selected true" instead of "defaultSelected true".

EDIT: As it turned out, the code above works fine, thanks to the help of deceze and rosscj2533 below. The only reason it doesn’t work for me was to find a ruby ​​code that was rewriting selected elements.

Thanks for helping everyone,

Greetings

+7
javascript jquery html
source share
7 answers

The defaultSelected attribute cannot be set, it is just for informational purposes:

Quote :

The defaultSelected property returns the default value for the selected attribute.
This property returns true if the parameter is selected by default, otherwise it returns false.

I think you want:

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

those. set the selected attribute to the option you want to select.

Without trying to fix my code, here's roughly how I will 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 already have a lot of luggage and dependencies, and I can’t tell you how to best integrate the selected option into your code without seeing it anymore, but hopefully this helps.

+16
source share

Here you can change the selected option of the <select> element in javascript. you can use

document.getElementById ('seller') SelectedIndex = 1.

By setting it to 1, you select the second item in the drop-down list. The index of the selection item starts at 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>
+2
source share

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

+1
source share

Your code works for me. When is the addSalespersonOption call called? There may be a problem with this call.

Also some of your html are slightly different (maybe a copy / paste problem?), But this does not seem to cause any problems. Your choice 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 is the options list populated dynamically? Are you sure you are using 'on' for the defSales value in your addSalespersonOption call? Try changing this code:

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

and see if a warning occurs and what is said if that happens.

Edit: A working example of my testing (error: undefined is jsbin, not my code).

+1
source share

Your syntax is incorrect.

You need to call attr with two parameters, for example:

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

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

0
source share

SCRIPT

  <script type="text/javascript"> $(function(){ $("#gender").val("Male").attr("selected","selected"); }); </script>

HTML

 <select id="gender" selected="selected"> <option>--Select--</option> <option value="1">Male</option> <option value="2">Female</option> </select>

Click here for details.

0
source share

Here it is.

 // Select by value $('select[name="options"]').find('option[value="3"]').attr("selected",true); // Select by text //$('select[name="options"]').find('option:contains("Third")').attr("selected",true); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <html> <body> <select name="options"> <option value="1">First</option> <option value="2">Second</option> <option value="3">Third</option> </select> </body> </html>
0
source share

More articles:


All Articles