Develop Reference

JQuery set select using .prop('selectedIndex', #) not working

I'm using the following line to set a option from a select menu:
$('select').prop('selectedIndex', 2)
Using the following site as a example:
http://shoebaloo.nl/michael-by-michael-kors-chelsea-skate-leo-bruin-dessin-285000097-women-sneakers.html
I am indeed seeing the select option going to the second option but it wont have the same effect as actually clicking on the second option.
Can someone help me so the page actually recognises me "clicking" on a option?

You need to select the option with a selector.
$('select option:eq(2)').prop('selected', true)
If you're looking to manually trigger a click or change event, you could use the .trigger('click') or .trigger('change') methods.
http://jsfiddle.net/j5v6tp7t/4/

All you should have to do is use .val() to set the value.
For example:
$('select').val('2')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>

Your expression was right but the correct syntax is :
$('select').get(0).selectedIndex = 2;
http://jsfiddle.net/f4s762cq/

Change the dropdown value as per page change

<select id="location-search" onChange="window.location.href=this.options[this.selectedIndex].value;"> >
<option value="http://dignitytech.com/efront/contact-us/">Ireland</option>
<option value="http://dignitytech.com/efront/united-kingdom-2/">United Kingdom</option>
<option value="http://dignitytech.com/efront/spain/">Spain</option>
<option value="http://dignitytech.com/efront/romania/">Romania</option>
</select>
Now i want to change the dropdown value as per page change.
Anybody help me

You should be able to achieve this with this simple line of code executed on page load:
$('#location-search').val(location.href);

Based on what you already have, I'm assuming that you have exactly that select on multiple pages. If so, then simply on each page mark appropriate value (so when you're on contact-us, mark that option with selected attribute).

Fail to set selected in combobox jquery

i'm loading a combo-box dynamically with jquery, after renderized, this combo have the follow structure
<select id="cboCliente" class="form-control">
<option value="0">Selecione...</option>
<option value="1">Cliente 0</option>
<option value="2">Cliente 1</option>
<option value="3">Cliente 2</option>
</select>
After some validation, i try to set one of this options as "selected", but don't work. This is my code:
$('#cboCliente option[value='+ m.getIdCliente() +']').prop('selected', true);
the method getIdCliente() is working fine, i receive the value "1".
The thing is, the jQuery can't set the selected option, and when a try for the Developer tools of chrome, everything works fine.
Am i doing something wrong?

Use
$("#cboCliente").val(m.getIdCliente());
Working demo: http://jsfiddle.net/GNzSL/

can we cache it first like this?
var selected = '#cboCliente option[value='+ m.getIdCliente() +']';
$(selected).prop('selected', true);

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.

try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});

How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?

This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.

It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/

You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/

Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.

please use this code instead,
$('#selectId option:selected').val();