How to select from option menu in javascript

Question

I need to be able to change certain option from select menu to be as default (start) value when I do something.

For example when I declare it, English language is default value.

How to change that with the code and not with the click.

<form id="form1" name="form1" method="post" action="">
<select name="websites1" id="websites1" style="width:120px" tabindex="1">
    <option value="english" selected="selected"  title="images/us.gif">English</option>
    <option value="espanol" title="images/es.gif">Espanol</option>
    <option value="italian" title="images/it.gif">Italiano</option>
</select>
</form>

In the body tag I have declared:

<script type="text/javascript">
$(document).ready(function() {
$("body select").msDropDown();
});
</script>

I am using this SCRIPT

I have tried all of the bellow examples and none this is good for me.

What else can I do change default select value.

Answer 1

This is working for me as mentioned in the docs:

$('#websites1').msDropDown().data('dd').set('selectedIndex',2);

This will select italian ;)

/edit:

Keep in mind that @Patrick M has a more advanced approach and he posted his approach before I posted mine ;)

If you are having weird css issues like I did, try this undocumented stuff:

$('#websites1_msa_2').click(); // this will also select the italian

As you can see the id is generated by $('#websites1_msa_2') the id of the selectbox plus the $('#websites1_msa_2') index of the option item.

A bit hacky but works ;)

So you could then define a JavaScript-Function like this:

var jQueryImageDD_selectByName = function(name) {
  var children = $('#websites2_child').children();
  for(var i=0;i<children.length;i++) {
    var label = children[i].getElementsByTagName('span')[0].innerHTML;
    if(label === name) {
      children[i].click()
    }
  }
};

And then use it like this:

jQueryImageDD_selectByName('Italiano'); // will select Italiano :)

Answer 2

He does say

You can set almost all properties via object

So, just guessing from the documentation examples he provides on that page... I would think adapting this:

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.size([true|false]);
//Set or get  the size property

To the .value property might work. So for you to set the language to Italian, try

var oHandler = $('#comboboxid').msDropDown().data("dd");
oHandler.value('italian');

// Or maybe the way to do it is this:
oHandler.set('value', 'italian');
// Or maybe 'value' shouldn't be in single quotes
//set property

If that doesn't work, you could try looping over all the properties, getting and comparing the value at each index and, when you find it, setting the selected index to that property name.

var languageSelect = $('websites1');
var oHandler = $('#websites1').msDropDown().data("dd");
for(var index = 0; index < languageSelect.length; index++) {
    var option = oHandler.item([index]);
    if(option == 'italian') {
        oHandler.set("selectedIndex", index);
        break;
    }
}

One of those should work. If not, you're pretty much just going to have to wait for a reply from the author.

Answer 3

You can either use selectedIndex to change the index of the selected option (0 being the first)

document.getElementById("websites1").selectedIndex = 1; //espanol

, or you can use value to change the text of the value (and if there's a match, it will change it automatically).

document.getElementById("websites1").value = 'espanol';

Answer 4

use selectedIndex. See this page. A select control has an options property, which basically is an array of option elements. The first element in your select is options[0], english, so:

document.getElementById("websites1").selectedIndex = 0; //=> english

You can also make the first option selected by default using:

document.getElementById("websites1").options[0]
       .defaultSelected = true; //=> english by default

Answer 5

working option (1. destroy msdropdown, 2. select by value, 3. set up msdropdown)

put this code somewhere in js:

jQuery.fn.extend({
    setValue: function(value) {
    var dd = $(this).msDropdown().data("dd");
    dd.destroy();
    $(this).val(value);
    $(this).msDropdown();
  }
});

setting value:

$('#selectorOfmsDropDown').setValue('opt10');

or just:

$("#selector").msDropdown().data("dd").setIndexByValue(newvalue);