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();
Related
When i'm first time entering multi select values i got the current entered text value based on below code in jquery
<select class="form-control select2" multiple="multiple" data-placeholder="Select areas" style="width: 100%;" id="edit_areas" name="area">
</select>
$(".select2-search__field").val()
$(document).on('keyup',".select2", function (e) {
var city = $("#add_city option:selected").text();
var location = $(".select2-search__field").val();});
which works fine.
But on edit when try to enter more values,current entering value is failed to get by using above code its showing empty
Note: Here i'm setting the dropdown dynamically based on user enters
Can anyone help me to resolve this issue.
You should use select2 specific methods to get and set the value, once you already converted to the select2.
When you are setting the value (e.g. for edit), use code like following :
$(".select2").select2("val", "Am,WY".split(","));
and to get the value, use code like following :
$(".select2").select2('val');
Hope it will resolve your issue (as not sure what is the HTML and code you are having, its just a guess :-))
Without seeing your HTML or complete jQuery it's hard to see exactly what you are trying to do. So I have made a stab in the dark.
$(document).ready(function() {
$('.mrselect').on('change', function() {
var values = $(this).find('option:selected');
var fancyPantsArray = [];
values.each(function() {
fancyPantsArray.push($(this).val());
});
console.log(fancyPantsArray);
});
});
<select class="mrselect" multiple="multiple" name="mrselect">
<option value="Mr Option 1">Mr Option 1</option>
<option value="Mr Option 2">Mr Option 2</option>
<option value="Mr Option 3">Mr Option 3</option>
<option value="Mr Option 4">Mr Option 4</option>
<option value="Mr Option 5">Mr Option 5</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
try this
var nome = $("#select_id").data('select').$dropdown.find("input").val();
or
$('input.select2-input').val();
In my google chrome extension options.html, I use a chained select to get a value which I store in chrome.storage, which works great.
Now when I reopen my options.html I want to get the values out of my chrome.storage and set the chained select again to those values. My code works for setting the first select, but the 2nd one stays empty. How can I set both select to the chrome.storage values?
Here is a fiddle example of my problem: http://jsfiddle.net/timw1984/2hxzem1e/2/
As you can see the first select changes on button click but the 2nd one doesn't.
options.html:
<select id="choose-channel" name="accounts">
<option value="MLB">MLB</option>
<option value="NFL">NFL</option>
<option value="2">NBA</option>
</select>
<select id="choose-channel-2" name="searches">
<option class="MLB" value="Orioles">Orioles</option>
<option class="MLB" value="RedSox">Red Sox</option>
<option class="MLB" value="Yankees">Yankees</option>
<option class="NFL" value="49ers">49ers</option>
<option class="NFL" value="Bears">Bears</option>
<option class="NFL" value="Bengals">Bengals</option>
</select>
options.js:
var team, sport ;
$("select").addClass("ui-selectmenu-button ui-widget ui-state-default ui-corner-all");
$("#choose-channel-2").chained("#choose-channel");
chrome.storage.sync.get({
sport1:"MLB",
favoriteTeam: 'RedSox'
}, function(items) {
document.getElementById('choose-channel').value = items.sport1;
document.getElementById('choose-channel-2').value = items.favoriteTeam;
});
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
save_options);
Thanks!
Tim
Just setting the value through .val()/.value often does not trigger the same kind of processing as interacting with the input element does.
You should trigger an event that indicates that the value has changed:
$('#choose-channel').val(items.sport1).change(); // or .trigger("change")
$('#choose-channel-2').val(items.favoriteTeam).change();
Your JSFiddle, patched.
I have a select element
<select id='bill_to'>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
If I do
$('#bill_to').find(':selected')
it returns the first option even though it is not selected.
If an option is selected
$('#bill_to').find(':selected')
works as expected and returns the correct option
What am I doing wrong? Is this a bug. This is driving me crazy.
I just want it to return [] if there is nothing selected
If there are no select option with selected attribute, first option will be the selected option by default. You can try adding another option to top that contains default value as follow.
<select id='bill_to'>
<option value='-1'>Select<option>
<option value='a634jhj2'>test#c.com<option>
<option value='agfd4ghj2'>test2#c.com<option>
<option value='asdf634jhj2'>tes3#c.com<option>
<option value='agf2342d4ghj2'>test4#c.com<option>
</select>
If nothing is selected you will get -1 and then you can proceed.
e.g. http://jsfiddle.net/fZv5t/
I have add closing tag of option "", without this I am having an empty option get inserted after each option in the dropdown. Issue can be seen in this Fiddle.
And the working example is on this Fiddle.
Try to add an empty option tag:
<select id='bill_to'>
<option></option>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
Here you will get empty string, like this:
$('#bill_to').find(':selected').val();
If you can't or don't want to add a dummy first <option>, as an alternative you can grab and test the selected attribute of the element returned by :selected, for example:
var selection = $('#bill_to').find(':selected');
var really = (selection.attr('selected') != null);
var selval = really ? selection.val() : ""; /* or null or whatever */
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);
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);