I want to show the value of a dropdown only if it has actually a selected option with selected attribute. Browsers are detecting the first dropdown option by default regardless if it has selected attr or not. So :selected method gives you a result regardless. Is there any way to detect if the selected option actually has the selected attribute?
$( "#optionTagID" ).val();
jQuery docs
Gives you the value of the selected option. You can check if this is the desired value and then hide the element accordingly.
In your option tags, you can have a property of "selected"
<select>
<option value="">Please select an option</option>
<option selected value="foobar">foobar</option>
</select>
For jQuery you can do this:
$("select option").each(function(){
if($(this).prop("selected") == true)
{
alert("found the selected option. The value is: " + $(this).val());
}
});
Fiddle: http://jsfiddle.net/o24g9feo/
Related
I'm trying to make a selection in the select box based on the URL. The urls are tied to the value attribute of option. How can I do this in jQuery?
<select>
<option value="http://name.com/">All</option>
<option value="http://name.com/category/electronics">Electronics</option>
<option value="http://name.com/category/books">Books</option>
<option value="http://name.com/category/furniture">Furniture</option>
<option value="http://name.com/category/kitchen">kitchen</option>
<option value="http://name.com/category/homeware">Homeware</option>
<option value="http://name.com/category/outdoors">Outdoors</option>
</select>
Maybe you want to bind the dropdown from the web URL. So you can add the id to your <select> tag like "drpCategory". Now you need to add below script for auto-selection of your dropdown.
$(function(){
$("#drpCategory").val(window.location.href);
});
At first, get the pathname from the URL you're currently in. You can do this with this function: window.location.pathname. Then in javascript code check if your pathname matches any of the options value and if it does then add selected attribute on that option.
If you just need to select an option on page load then the following should do it.
$(function(){
$( "select").val(window.location);
))
Put this code immediately after your <select> block:
<script>
$('select').last().val(location.href)
</script>
$('select').last() is jQuery's way to select the preceeding <select> element in the document. .val(value) is jQuery's way of changing the selection to the option with the specified value. By passing location.href to .val() you are telling it to select the option whose value contains the full URL of the current page.
I have the following select list inside my web page:-
<select id="OrderStatus_12192838383111121" title="Status Required Field" class="ms-RadioText">
<option>In Progress</option>
<option>Waiting Customer Approval</option>
<option>Reject</option>
</select>
now i want to select one of the above options based on the value from another field, so i tried the following:-
var pmname = $('[id^="OrderProjectManagerStatus_"][id$="Display"]').attr("title");
alert(pmname);
$('select[id^="OrderStatus_"]').text() == pmname;
now the alert showed the correct value, which as "Reject", but this option did not get selected inside my select list using $('select[id^="OrderStatus_"]').text() == pmname;.
so can anyone advice how i can dynamically set the selected option for my select list using jQuery ??
Thanks
For selects you'll have to get the option element and set selected attribute to true
$('select[id^="OrderStatus_"] option').filter(function(index, item) { return $(item).text().trim() === pmname }).attr("selected", true);
And also, don't forget to have a value attribute assigned to option like so: <option value="Something">Something<option>
can look below may be help you understand
$( "[id^="OrderProjectManagerStatus_"] option:selected" ).each(function() {
str += $( this ).text();
});
How do I get all select elements that do not have an option selected using jQuery?
<select id="one">
<option value=""></option>
<option value="test"></option>
</select>
<select id="two">
<option value=""></option>
<option selected value="test"></option>
</select>
What would the jQuery selector be that would return just #one based on no selection?
Refer to https://stackoverflow.com/a/63588880/3499595 if your case is not similar to OP (default value is "")
$('select option:selected[value=""]').parent()
Selects all the :selected options of all the select elements
Checks if the selected option has a value of "", which in your case means no option is actually selected.
Returns the parent (which would be a select)
You can take advantage of jQuery's .parent() and .not() functions. See below:
// selector for all 'select' elements with any option below it
var all = $("select>option").parent(); // alternative $("select")
// selector for all 'select' element with a selected child
var selected = $("select>option[selected]").parent();
// the subtraction set "all - selected" achieved by `not`.
var unselected = all.not(selected);
Note that jQuery's parent takes care of removing duplicates from a set of parents of child elements.
JsFiddle here.
The accepted answer gives all select elements with a selected option whose value is empty(""), which does answer the question in regard to the OP's sample HTML, where options with empty values are given, but it doesn't really answer the title question.
There is a difference between selecting an option with an empty value, and not selecting any option at all.
To select all select elements with no option selected, use
$('select').not(':has(option:selected)')
If you have jquery library then try
$('select option').filter(function(i,d){return !d.hasAttribute("selected")});
i have 2 dropdownlist, i want if i select Alabama in dropdwon1 the selected value in dropdwon2 should change in to Other.., how to do this using JQuery
<select id="dropdwon1">
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
</select>
<select id="dropdwon2">
<option value="3">Item1</option>
<option value="4">Item2</option>
<option value="5">Other..</option>
</select>
You must bind event to first select change event and check it's selected value and set value for second select like this:
//Bind change event to first select
$('#dropdwon1').on('change', function(){
//check selected value
var value = $(this).val();
if(value == 1){
//Set selected value for second select
$('#dropdwon2').val(5);
}
})
You have to initialize your value for the second select for the first value of your state select, like so :
if($("#dropdown1").val()=="1"){
$("#dropdown2").val("5"); // Set the value (your answer)
}
then use the change event and give the different values of the second select for the states values.
As the user can select Alabama again after having chosen another value, you have to put the code for the first value in the change event function.
Here is a jsfiddle :
https://jsfiddle.net/mantisse_fr/ak81o26s/4/
how to set or change value to drop down.
I'm having a drop down list which is initially not selected a value.
How can i select a value using jquery
The val() function is used to get and set the value of input controls (including <select>). Grab a jQuery reference to your <select>, and pass its val() function a string matching the value attribute of the <option> that you wish to select:
$("#mySelect").val("15");
This would select the second option in this list:
<select id="mySelect">
<option value="5">Few</option>
<option value="15">More</option>
<option value="100">Many</option>
</select>
$("#id_select").val("value_1");
id_select -> is the id of your select
value_1 -> is one of the values presents in the option of select