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);
Related
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/
I have what seemed to be a simple task. Get select value with jQuery. Simple way would be
jQuery('#select').val();
And this works in Chrome. But when I move to Firefox and do
console.log(jQuery('#select').val()); // result => ""
I get an empty string. I've tried jQuery('#select option:selected').val(); and this also works with Chrome, but Firefox still returns empty string.
This select is generated by jquery-ui autocomplete and it has structure like this
<select id="select" class="js-SelectList" name="selSelect" style="display:none;">
<option value=""></option>
<option value="Apple"></option>
<option value="Microsoft" selected="selected"></option>
<option value="Google"></option>
</select>
When I add value to first option and I get it's value, so aside from Microsoft option being selected, jQuery in Firefox still regards first option as selected.
Any idea why
The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.
<select id="options" multiple>
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
<option id="5">Option 5</option>
<option id="6">Option 6</option>
<option id="7">Option 7</option>
</select>
In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.
http://localhost/index#options=2,3,4
I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.
Fiddle
Please let me know if I provide any additional information.
Part of your issue is that in JSFiddle you won't be able to see the hash.
That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.
You could so something like this (based on #popnoodles code)
$( '#options' ).on( 'change', function() {
window.location.hash = $( this ).val().join( ',' );
});
Working demo
Ok without interfering with any of that plugin code
First you need to address your options
use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>
Then this jQuery will do what you want.
$('#options').on('change', function(){
var val=$(this).val();
if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
else hash='';
window.location.hash=hash;
});
I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);
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();