I have a selectbox as follows:
<select id="select_search">
<option value="search_contact">Contact</option>
<option value="search_customer">Customer</option>
<option value="search_employee">Employee</option>
<option value="search_servEmp">Service Employee</option>
<option value="search_servOrg">Service Org</option>
</select>
The above selectbox is part of a search form. When you submit the form, using an ajax request the results are returned to same page asynchronously.
On my results page (the one loaded asynchronously), I have a grouping of other select boxes that act as filters for the results.
<select id="select_customer">
<option value="">something</option>
</select>
<select id="select_contact">
<option value="">something else</option>
</select>
etc....
How can I get the value of the original selectbox (#select_search) to show/hide the appropriate selectboxes that were loaded via ajax. (eg. if search_contact was the selected option, only show the select box with id="search_contact")
The only way I'm familiar with is to get the value of the select box on change, but in this case the affected elements will not be loaded until after the change occurs.
You can Try this in jsFiddle .
$(function () {
$(document).on('change', '#select_search', function () {
$('select:not(#select_search)').addClass('invisble');
var selectSearchVal = $(this).find('option:selected').val();
$('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble');
});
});
If you're using JQuery $(#select_search).val() should do the trick.
The new way to make a $.live
$(document).on('change', '#select_search', function() {
// change
});
Related
with on click event i returned the below drop down element as ajax json response, without page refresh:
<select class='custom-select col-md-4' id='family'>
<option value''> Select family</option>
<option value='1'>familyName</option>
</select>
then I want to execute a function when changed the option using:
$('#family').on('change', function(){
alert("Yeey");
});
but doesn't seem to be working.
Your code seems to be working.
Just add one more option in select
For now, you have only one option which is by default selected so no change event applied.
your script is good.
example:
<select class='custom-select col-md-4' id='family'>
<option value=''>select family</option>
<option value='1'>familyName</option>
</select>
Needs more than 1 option.
By default, the first option is selected.
So there's no on change event triggering.
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 title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>
Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});
Try this
$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/
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();