This question already has answers here:
What is the most efficient way to sort an Html Select's Options by value, while preserving the currently selected item?
(12 answers)
Closed 8 years ago.
There is situation like this:
<select id="trollSelect">
<option value="PL">Polish Troll</option>
<option value="EN">English Troll</option>
<option value="JP">Japanese Troll</option>
[...] //more options created dynamically
</select>
Option values and Option texts are unsorted in Select. Is this possible to sort this options in JQuery or Javascript by value or text alphabetically ??
The result should be like that:
<select id="trollSelect">
<option value="EN">English Troll</option>
<option value="JP">Japanese Troll</option>
<option value="PL">Polish Troll</option>
[...] //more options created dynamically
</select>
This code should do it. I've sorted them on their values but this can also be used to sort based on the text.
$(document).ready(function() {
var opt = $("#trollSelect option").sort(function (a,b) { return a.value.toUpperCase().localeCompare(b.value.toUpperCase()) });
$("#trollSelect").append(opt);
});
Here's a fiddle for the same
Related
This question already has answers here:
How to select more than one option in multiple selection list using jquery?
(4 answers)
Closed 2 years ago.
<select>
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
Is there a way to select that options where have this values: 0, 2, 3
Something like this:
$('option[value=0,2,3]')
No, you can't put a list in an attribute selector.
You can use a list of selectors separated by comma, but there's no shorthand.
$('option[value=0],option[value=2],option[value=3]')
Perhaps a better solution would be to give all those options the same class, then use a class selector.
use the :not() css function option:not([value=1])
const selected = $('option:not([value=1])').text('selected')
console.log(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0"></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
</select>
This question already has answers here:
How can i get the unselected items from dropdown using jQuery? [closed]
(1 answer)
Get list of values from dropdown that are NOT selected using jquery
(2 answers)
How to get currently unselected option value when un selecting from multi list box
(2 answers)
get unselected list using jquery multi select box
(2 answers)
Closed 3 years ago.
By default, I have all the dropdown items selected. But when a user unselects one of them, I want to get the value of that unselected option.
I have tried the following option:
This is my html code:
<select class="ss-select" data-dropup-auto="false" id="ss_options" multiple="multiple" name="ss">
<option selected="selected" value="1">One</option>
<option selected="selected" value="2">Two</option>
<option selected="selected" value="3">Three</option>
<option selected="selected" value="4">Four</option>
<option selected="selected" value="5">Five</option>
</select>
This is the jquery code I tried:
$("#ss_options").change(function(){
alert($(this).val());
});
With this code, when I unselect an option (example: one), I get the values as [2, 3, 4, 5]. I am aware that I can do array subtraction to get the desired value, but is there some better of doing it?
Use :not and :selected:
alert($("#ss_options option:not(:selected)").val());
This question already has answers here:
Get selected value in dropdown list using JavaScript
(32 answers)
Closed 7 years ago.
I was trying to implement dropdown menus on my website. I am using a similar code to this.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button>Try it</button>
I don't know how to findout what has been selected, and read it in javascript.
It depends on what you want, the value or the text correspondent to the value.
If you want the actual value:
var dropdown = document.getElementById("your-dropdown-id");
var dropdownValue = dropdown.options[dropdown.selectedIndex].value;
If you want the text, just change the property you are looking for:
var dropdownText = dropdown.options[dropdown.selectedIndex].text;
This question already has answers here:
Adding options to a <select> using jQuery?
(31 answers)
Closed 8 years ago.
I am trying js:
$('a[data-select="more-options"]').click(
function () {
$('select')
.append($("<option></option>")
.attr("one more additional and long option",3)
.text("3333333333"));
}
);
on HTML of
<span id="dropdown">A
<select>
<option>this is option 1</option>
<option>This is option 2</option>
</select> list<br>
</span>
<a data-select="more-options" href="#">Add long option to the select</a>
but I get no results (or error).
Check this fiddle.
$('select').append( "<option>This is option 3</option>" );
This appends the third option to select. You can add other attributes to the option.
Check this,
$('a[data-select="more-options"]').click(function () {
$('select').append("<option>3333333333</option>");
});
jsfiddle
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Selecting an option by its text
Is there any way how to choose the option in selectbox by the text label of the option (not the value)?
<select id="form-mySelect" name="number">
<option value="0">Zero</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
$("#form-mySelect").val("One");
The example above doesn't work in jQuery 1.4.3. I've read somewhere, that in some lower version of jQuery selecting option by >text label< (not by the value) works.
Is there any way, how to simulate this behavior and make it functional in jQuery 1.4.3?
You can use $('#form-mySelect").html() to get the label contents. So you could loop all options and compare the html() value with one given and then select the option.