In my application I am using select2 plugin for drop-down with multiple select values. And now I want to add some static option to the select2 drop-down.
<select multiple="" class="test">
<option value="a">Illustrations</option>
<option value="b">Maps</option>
<option value="add">Add Status</option>
</select>
And I am applying multi select, now when I click on add status option I want to do some functionality and this option will not selected as like the option.
And my js code :
$('.test').select2();
$('.test').on("select2-selecting", function(e) {
alert($(".test").val());
});
But alert is giving all the selected values a,b,add. But I want to get the 'add' option only.
Please suggest me how can I do this.
Thanks in advance.
Try it with this:
alert($(".test option:selected").val());
Could it be? Or do you need to handle an event at the value 'add'?
$('.test').select2();
$('.test').on("select2:select", function(e) {
if( $('.test').val()[0] === "add" ) {alert("add")}
//or search value add
if($(".test").val().indexOf("add") > -1) {alert("search add")}
});
Related
So I am trying to get the user input(value) of this select option button. Everything I look at online dosen't really tell me how to get this button value so I can use it and manipulate it, please help
You need a click event listener for this.
This code snippet demonstrate what you need to do:
// Get Select List
var favAnimal = document.getElementById("favAnimal");
// Add event Listener for any change in the selection
favAnimal.addEventListener("change", function() {
if (favAnimal != undefined && favAnimal.value != "Choose"){
//Do actions on selected option
console.log(favAnimal.value)
}
});
<select id="favAnimal">
<option value="Choose">choose</option>
<option value="Lion">Lion</option>
<option value="Shark">Shark</option>
<option value="Eagle">Eagle</option>
</select>
Given a select with some options
<select id="favAnimal">
<option value="Choose">Choose</option>
<option value="lion">Lion</option>
...
</select>
To get the value of the select you do it like this
var favAnimal = document.getElementById("favAnimal");
console.log(favAnimal.value);
I have a html select box with several options. Upon selection of an option I want Only the selected option and the first option to be shown in the select option dropdown. I know how to filter and show only one option but I cannot figure out how to include both option where the 'selected' option remains 'selected'. I have include snippets similar to of my code as well as a demo.HTML:
<select id="myDropdown">
<option selected>Select fruit</option>
<option>Grapes</option>
<option>Bananas</option>
<option>Oranges</option>
<option>Apples</option>
</select>
JS:
$(document).on('change', '#myDropdown', function() {
$('option', this).not(this,'option:gt(0)').siblings().remove(); });
I am trying to use the first option to perform another function 'on change' so I need the selected option to remain selected while the rest being filtered out except for the first. For example if 'Oranges' were selected, this is what you would see:
<select id="myDropdown">
<option>Select fruit</option>
<option>Oranges</option> //selcted value
</select>
BTW I am using jquery mobile to style as well.
jsfiddle
.not only takes 1 parameter. If you want to filter on two different selectors, you can add a comma between them inside the string. You can also use the :selected selector:
$('option', this).not(':eq(0), :selected').remove();
See Updated Fiddle: http://jsfiddle.net/znx9hxvu/9/
I am using the following jQuery plugin:
http://designwithpc.com/Plugins/ddSlick
To show selectable images in a dropdown select box. It is working great apart from when I try to load the html with an option already selected, this option is not selected in DDSlick (so it just shows the first option as selected).
How can I transform:
<select class="homepage_icon" name="section_thumbnail[]" id="section_thumbnail4"><option data-imagesrc="../assets/images/homepage_icons/kidjockey-thumb.jpg" value="kidjockey-thumb.jpg"></option>
<option data-imagesrc="../images/homepage_icons/horse.png" value="horse.png"></option>
<option data-imagesrc="../images/homepage_icons/rosette.jpg" value="rosette.jpg"></option>
<option data-imagesrc="../images/homepage_icons/girl.png" value="girl.png"></option>
<option data-imagesrc="../images/homepage_icons/balloon.jpg" value="balloon.jpg" selected="selected"></option>
<option data-imagesrc="../images/homepage_icons/cake.jpg" value="cake.jpg"></option>
</select>
To actually show the selected option in DDSlick?
My plugin initialization is just the simple:
if ($('.homepage_icon').length) $('.homepage_icon').ddslick();
I assumed a selected option would automatically show in DDSlick but perhaps I'm missing something?
You can use the following to instantiate your drop downs:
$('.homepage_icon').each(function() {
var selectedIndex = this.selectedIndex;
$(this).ddslick({ defaultSelectedIndex: selectedIndex });
});
I am trying to get two parameters from dropdown list change event. Dropdown list uses chosen.js
First I would like to get a name of the dropdown list
Second I would like to get a value of an item that has been selected
I found this code in documentation:
$('.my_select_box').on('change', function(evt, params) {
do_something(evt, params);
});
but when I trigger it, params are undefined. Have been looking everywhere, but cannot find out how to do it. Can you help please?
With jQuery, use $(this).val() into your callback function, check the Fiddle :
<script>
$('.my_select_box').on('change', function(evt, params) {
// The name of your select
alert($(this).attr('name'));
// The value
alert($(this).val());
});
</script>
Then
<select name="my_drop_down" class="my_select_box">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
There can be many options in a SELECT dropdown.
<select id="sel">
<option value="car">1</option>
<option value="bike">2</option>
<option value="cycle">3</option>
...
</select>
I'm creating a Update Profile page where a user's profile is retrieved from the database and a form is shown with those values. When it comes to SELECTdropdown, there are many options. So, its tedious test all values
if (value == '1')
echo "<option selected value='car'>1</option>";`
So, I want to have the corresponding option selected from its value. Like when I do something like sel.value = 'bike' using JavaScript the option 2 should be selected.
You can select the value using javascript:
document.getElementById('sel').value = 'bike';
DEMO
If you are using jQuery:
$('#sel').val('bike');
try out this....
JSFIDDEL DEMO
using javascript
document.getElementById('sel').value = 'car';
using jQuery
$('#sel').val('car');
document.getElementById('drpSelectSourceLibrary').value = 'Seven';