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>
Related
I'm trying to select an option from a select dropdown with the text() attribute of the HTML element with cheerio. So far what I'm doing is that I'm trying to set the attr as selected matching, the element with the specific text.
This is what I'm trying:
$('#ddl_city option[text="testing"]').attr('selected', 'selected');
I'm not getting any changes on the html when I do this. I print the html document on the console after doing this operation and I don't see that the option has changed to the one I'm selecting. Any idea why is not working or another workaround?
You can try this:
$('#ddl_city option').
filter(function () { return $(this).text() == 'testing'; }).
attr('selected', true);
Credits to Godsbest's answer in this post on the jQuery forum.
You can use the :contains filter to get the specific option element based on the text and set the value of the select element to it's value:
$('#s1').val($("#s1 option:contains('Val B')").val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="a">Val A</option>
<option value="b">Val B</option>
</select>
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'm using the plugin jQuery UI MultiSelect http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/.
But I want just one <select> determinated by me to be multiple!
I alrealy have others <select> on my page (simple selects), like this:
<select name='simple_select' id='simples_select'>
<option value='1'>Option 1</option>
</select>
And, for the multiple <select>:
<select multiple="multiple" name='multiple_select' id='multiple_select'>
<option value='1'>Option 1</option>
</select>
When I change this function from "select" to something else, (like "div") all the divs stay "multiple". So, like this function (downloaded from the plugin site), all the <select> will be multiple... and I just one specific.
<script type="text/javascript">
$(function(){
$("select").multiselect();
});
</script>
Anyone have any idea how can I make it? Thanks for reading and I'm sorry about the terrifying english (I'm brazilian). ^^
Try using :not() to exclude a select you don't want calling it's ID inside :not()
$(function(){
$("select:not(#simples_select)").multiselect();
});
Demo
Or just use the ID selector for the one that you want, since it has ID:
$(function(){
$("#multiple_select").multiselect();
});
Demo
Unless you specifically want to apply something across a group of tags or objects it's much better practice to use IDs. To apply the code to the specific ID use the # symbol with the ID.
You can learn about CSS selectors with jQuery here: http://api.jquery.com/category/selectors/
<script type="text/javascript">
$(function(){
$("#multiple_select").multiselect();
});
</script>
If you want to select all <select> use $('select') and if you only want to select a specific <select> use $('#mySelect').
See this link for more info
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 have a list of countries, html, they have numeric ids and country name:
Ex:
<select name="userDto.nationality" id="userDto.nationality">
<option value="">Seleccione</option>
<option value="1">Alemania</option>
<option selected="selected" value="2">Argentina</option>
<option value="8">Australia</option>
<option value="9">Austria</option>
<option value="10">Bélgica</option>
<option value="11">Bolivia</option>
</select>
Im trying to use a jquery script to get the country of the list, not the value, the name and paste it inside of a label.
$(document).ready(function() {
$("#userDto\\.nationality option:selected").click(function() { $("#nationalityLabel").html(this.value); });
});
And the HTML that should get the country name is:
<div name="userLabelDiv" id="nationalityUserLabelDiv">
<label class="required">Nacionalidad :</label>
<label id="nationalityLabel"></label>
</div>
Could someone guide me through the problem? I cant find where is my error in the JS code.
Thank you
Two little things:
change selector from $("#userDto\\.nationality option:selected")
to $("#userDto\\.nationality")
change event handler from click to change
Done.
$(document).ready(function() {
$("#userDto\\.nationality").change(function() {
$("#nationalityLabel").html(this.value);
});
});
Why:
Your current code would have worked, but only for "Argentinia" since it is selected by default. With your selector option:selected you bound the event handler only to selected option elements, which is, Argentinia.
So you need to add an event handler to the select element itself. The change handler fires whenever you change the selection. I guess that is your desired result.