I need the default value of dropdown list for business logic if user doesn't select any value from dropdown list then i have to use default value of dropdown
You can get it by doing document.getElementById('idoftheselect').value
function getDefaultVal() {
console.log(document.getElementById('sel').value)
}
<select id='sel'>
<option val='1'>1</option>
<option val='2'>2</option>
<option val='3'>3</option>
<option val='4'>4</option>
<option val='5'>5</option>
</select>
<button type='button' onclick='getDefaultVal()'>Get Value</button>
add one more option with selected attribut
<select id="someId">
<option value="0" selected>Default</option>
</select>
using this
$('#selector option:selected').val();
In that case add one more option in dropdown like
<option value="-1">-select-</option>
then using jquery
$('select option:selected').val();
will always give the current dropdown selected value.
Related
I stuck in this issue which is when a user selects an option from one select box the option should be hidden for the other select boxes. When a selected option changes the previously selected option should become available again to the other select boxes.
The problem with my current code:
My code is working when the select box is normal option, if I change to select2 it will not function. Anyone know how to do it if the select box is select2 :(?
Code: http://jsfiddle.net/t8170aqg/1/
There are few issues in your code
You are using val in option which is not correct your should use value
Also you not matching with val() of the selected option in the previous select you are mat aching the text which will be always different.
Edit: You have to use .each to set attr disabled for other options.
Working Fiddle Demo: http://jsfiddle.net/usmanmunir/bqzt1rf9/
Run snippet below to see it working.
Using disabled attr on option
$(".s").select2()
$('.s').change(function() {
let value = $(this).val()
$(this).siblings('.s').children('option').attr('disabled', false)
$('.s').each(function() {
$(this).siblings('.s').children('option[value=' + $(this).val() + ']').attr('disabled', 'disabled')
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select class="datas_0 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alax</option>
<option value="4">king</option>
</select>
<br>
<br>
<select class="datas_1 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alex</option>
<option value="4">king</option>
</select>
<br>
<br>
<select class="datas_2 s">
<option selected disabled>Choose</option>
<option value="1">lim</option>
<option value="2">tan</option>
<option value="3">alex</option>
<option value="4">king</option>
</select>
I'm having a rather different structure of HTML and I am trying to get the selected value of a dropdown list as seen in the below code:
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker"
data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected="">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
My code returns null.
I want to get 2 as my value. As you can see, there's no value in the selected attribute.
var quantity = document.querySelector(".quantityDropdown select").getAttribute("selected");
How do I get the value 2 that's outside the option tag?
You should get the option tag, like this:
var quantity = document.querySelector(".quantityDropdown select option:checked");
You could use checked also for checkbox and radio.
This will give you the value of the selected item:
quantity = document.querySelector(".quantityDropdown select").value;
However if you want the actual content of the selected item (i.e. the text shown) outside of the option tag, use:
var quantity = document.querySelector(".quantityDropdown select")[document.querySelector(".quantityDropdown select").selectedIndex].innerHTML;
Use document.querySelector(".quantityDropdown select").selectedIndex
To get the selected option value you need to use two properties on the select element: options and selectedIndex to get the html option element, then you can get the value.
const dropdown = document.querySelector('.cart-quantity-picker')
console.log('selectedIndex', dropdown.selectedIndex)
console.log('options', dropdown.options)
console.log('selected', dropdown.options[dropdown.selectedIndex].value)
<div class="quantityDropdown quantityDropdown-cartItem">
<select id="qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421" class="cart-quantity-picker" data-orderitem="61224b70-7b26-11e6-91d5-6921d6fe7421">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
in case you need the get the 'value' :
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selValue = dropdown.options[dropdown.selectedIndex].value;
But if you want to get the text ΝΟΤ the value , you do:
var dropdown = document.getElementById("qtySelect-61224b70-7b26-11e6-91d5-6921d6fe7421");
var selText = dropdown.options[dropdown.selectedIndex].text;
<select id="ddlViewBy">
<option value="1">test1</option>
<option value="2" selected="selected">test2</option>
<option value="3">test3</option>
</select>
For getting the value you can use
document.querySelector('#qtySelect option:checked').value;
For getting the actual text inside the option you can use
document.querySelector('#qtySelect option:checked').text;
I am learning a jQuery.My question is When I click on edit button then particular dropdown value show which I selected. This selected value I want to store in jQuery so how can I store it?I have attached image please help me.
$('select').val() would get you the value attribute.
In case you want the text of selected option use $('select').find(':selected').text().
Here is an example:
$(function() {
//Get the selected value
console.log($('.service_select').val());
//Captures the selected value when the selection changes
$('.service_select').change(function() {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="service_select" class="service_select">
<option value="0">-- Select --</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
try with
For Selected Value
var selected_value= $('.service_select').val();
For all options values of dropdown
var all_values= $('.service_select option').map(function(obj){
return $(obj).attr('value');
});
For all options values with key value pair
var all_values= {};
$('.service_select option').each(function(){
all_values[$(this).attr('value')]=$(this).text();
});
I want to get attribute value of selected option element.
jQuery:
$("#select_element").val().attr("val");
HTML:
<select id="select_element" class="selectpanel">
<option val="x">element1</option>
<option val="y">element2</option>
</select>
Try this:
$('#select_element option:selected').attr('val');
Or
$('#select_element option:selected').val();
both are valid!
Simple use:
$("#select_element").val();
If you want the text of it, then:
$('#select_element option:selected').text();
JSFIDDLE
try this for get the value in the options
$("#select_element").val()
And try this for get the text in te option selected
$('#slcFoo option:selected').text()
You can see the example here
Re your edit showing:
<option val="x">element1</option>
val is not a valid attribute for option elements. The correct attribute is value, or if you want a custom attribute, use a data- prefix (data-val, for instance).
So depending on whether you meant value or data-val:
If you meant value:
$("#select_element").val() does give you the value (value attribute) of the selected option element in the select box:
console.log($("#select_element").val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
If you meant data-val:
If you wanted to get some other attribute from that same option element, you'd do it like this:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
E.g.:
var otherAttributeValue = $("#select_element option:selected").attr("data-val");
console.log(otherAttributeValue);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
<option data-val="first" value="1">One</option>
<option data-val="second" value="2" selected>Two</option>
<option data-val="third" value="3">Three</option>
</select>
Im trying to reset a select field like this
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
But this dosen't work on select2..
Here is a jsfiddle how I want it to look like and work like it!
And this should be the new one.. http://jsfiddle.net/js3vV/
Add defaultSelected attribute in second dropdown to set default selected value of dropdown , it will allow to return $('#name2').prop('defaultSelected') default value of dropdown,which will reset second dropdown on change in first dropdown.
<select id="name2" defaultSelected="">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
$('#name').change(function(){
$('#name2').val( $('#name2').prop('defaultSelected') );
});
$('#name2').change(function(){
$('#name').val( $('#name').prop('defaultSelected') );
});
add one function for that, I tested that, I think it worked.
here ur fiddle,
`