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/
Related
I want to show selectbox option using jquery when the page loads. I have used .simulate() and .trigger function but it's not working, so can you please suggest some solution for that.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="simulate.js"></script>
<script>
$(document).ready(function(){
$("#test").simulate('mousedown'); // not working
$("#test").trigger('click'); // not working
//$("#test").attr('size',3); // size is not as i need. i want to display option as any dropdown shows.
});
</script>
<select id="test">
<option value="0">select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Please help me to out from this problem...
Try this...
$(document).ready(function(){
var myDropDown=$("#test");
var length = $('#test> option').length;
myDropDown.attr('size',length);
$("#test").click(function(){
myDropDown.attr('size',0);
});
});
I think it's not possible. There's a lot of jQuery plugins out there to enhance the native select's functionality, like the Selectmenu Widget of jQuery UI which has an "open" method:
http://api.jqueryui.com/selectmenu/#method-open
or for Twitter Bootstrap:
http://silviomoreto.github.io/bootstrap-select/methods/#selectpickershow
just to name some...
It's not possible to open a selectbox with JavaScript.
I tried and got disappointed. I finally changed the attribute size for the select box so it appears to be open:
$('#test').attr('size',3);
and then when you're finished
$('#test').attr('size',0);
Hope that helps :)
I have a problem with changing selected value directly with a button click.
First, when I use these codes below without select2.js it works just fine.
<select id="mySelect">
<option value="1">Ana</option>
<option value="2">Lisa</option>
<option value="3">Jeremy</option>
<option value="4">August</option>
</select>
<button type="button" onclick="changeValue()">Chose August</button>
<script>
function changeValue() {
document.getElementById("mySelect").value = "4";
}
</script>
As you know, that button makes "August" as the selected value. But when I use select2.js, it doesn't work. I use select2.js to change other dropdowns options.
Please help. Thanks for advance.
You need to use val method of select2.js
$('#mySelect').select2("val", 4)
I have a multiple select HTML element.
<select multiple="multiple" id="mult_sel">
<option value="1">Dog</option>
<option value="2">Cat</option>
</select>
I'm using the following jQuery to capture when a single option in this multiple select is clicked on with the following:
$('#mult_sel').click(function(v){
console.log(v);
});
This event triggers as expected, however, I'm not sure how to get the value and text values of the single option that was clicked for a multiple select field.
Thanks!
try
$('#mult_sel option').click(function(){
alert('the value ' $(this).val()); //for get the value
alert('the text' $(this).text()); //for get the text
});
The .val() return the value of the option, and the .text() return the text of the option selected.
Jsfiddle
jsfiddle
$('#mult_sel').click(function(event){
// event.originalEvent.srcElement isn't fully supported
console.log(e.target);
});
there ya go :-) (do check if it's an [option] or a [select] element)
Try to use Select2 JQuery
you must download the code from GitHub and copy the dist directory to your project.
Include the following lines of code in the <head> section of your HTML.
<link href="../css/select2.min.css" rel="stylesheet" />
<script src="../js/select2.min.js"></script>
Initialize Select2 on the <select> element that you want to make it multiple select boxes.
<script type="text/javascript">
$('#select2-multiple').select2();
</script>
Example Code (Remember to declared with the multiple attribute)
<select class="select2-multiple" multiple="multiple">
<option value="WWL">Wong Wai Ling</option>
<option value="AE">Alessia Enzler</option>
<option value="ASL">A-Young SON LAuren</option>
</select>
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
});
I have a dropdown which must populate several other dropdowns depending on the option selected. I found a way how to do this using hidden fields. I created a hidden field for every sub dropdown with all its options. Then from my JS function, I check which selectedIndex is selected and then give the value of its respective hidden field.
This way works great, however, I am setting the value of the sub dropdown using the variable ID FROM the Js function. This reduces flexibility.
Does anybody know any other way how to pass all the parameters from the HTML?
Best method would be that all dropdowns are there but are not displayed. Upon change of the main dropdown, the respective sub drop down ONLY is shown.
Any ideas?
You should be able to do just what you want, have all the dropdowns hidden except the correct one.
<script type="text/javascript">
function changedropdown(index) {
dropdowns['dropdown1'].style.display='none';
dropdowns['dropdown2'].style.display='none';
dropdowns['dropdown3'].style.display='none';
dropdowns['dropdown4'].style.display='none';
dropdowns[index].style.display='inline';
}
</script>
<form name='dropdowns'>
<select onchange='changedropdown(options[selectedIndex].value)'>
<option selected value='dropdown1'>1</option>
<option value='dropdown2'>2</option>
<option value='dropdown3'>3</option>
<option value='dropdown4'>4</option>
</select>
<select name='dropdown1'>
<option selected value=1>dropdown1</option>
</select>
<select style='display:none' name='dropdown2'>
<option selected value=1>dropdown2</option>
</select>
<select style='display:none' name='dropdown3'>
<option selected value=1>dropdown3</option>
</select>
<select style='display:none' name='dropdown4'>
<option selected value=1>dropdown4</option>
</select>
</form>
If I understand the issue, the hidden values are not being returned in your post? To get around this issue I run a routine on submit that grabs all the hidden values and puts them into non hidden inputs of type hidden.
So...assuming you use jquery that would be something along the lines of
<div id='hiddenValues'></div>
<script type='text/javascript'>
function onSubmit() {
var hiddenValue = $('$yourHiddenSelectBox').val();
$('#hiddenValues').append("<input type='hidden' name='someId' value='" + hiddenValue + "'>";
}
</script>