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>
Related
Here's my code. Is it possible to empty the value of the first option using jquery/javascript ?
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
so it will become like that:
<option value="">Select category</option>
I already know that i can remove the whole first option by targeting its value
$("#select_1 option[value='0']").remove();
You can use plain javascript to get the first option of a select element using .options like so, which returns an indexed collection, so you can just use zero based index to grab the first option and set it's value property:
document.getElementById("select_1").options[0].value = '';
To target the first element of a collection use :first. Then you can use val('') to remove the value from it:
$('#select_1 option:first').val('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<script>
$(document).ready(function (){
$('#btnremoveoption').click(function (){
$('#select_1 option:first').remove();
});
});
</script>
<body>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>
This Program will keep Removing first option when ever button will be click.
$(document).ready(function (){
$('#select_1 option:first').remove();
});
this will remove it onload of the page. without leaving the option blank it will be filled with the next option.
I have the following code:
<select name="search[active]" class="form-control" placeholder="Active" />
<option value="1">True</option>
<option value="0">False</option>
</select>
And I want to select an option by value, for example, select True, for this I try whit the following code:
$('[name="search[active]"').text(True);
and
$('[name="search[active]"').val(True);
and not work.
Any idea?
Thanks
The selector by value will be like :
$('[name="search[active]"] option[value=1]').text();
And the selector by text will use :contains() like :
$('[name="search[active]"] option:contains(True)').val();
//Select By value
console.log($('[name="search[active]"] option[value=1]').text());
console.log($('[name="search[active]"] option[value=0]').text());
//Select By text
console.log($('[name="search[active]"] option:contains(True)').val());
console.log($('[name="search[active]"] option:contains(False)').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="search[active]" class="form-control" placeholder="Active">
<option value="1">True</option>
<option value="0">False</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 have 2 select option. Now I want to get id of select when user selected option. Ex: If I selected Option1 then alert id="my_select1" and if I selected MyOption2 then alert id="my_select2". How can I do that?
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
$('select').change(function() {
alert($(this).attr('id'))//use attr() to get id
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
Use .attr() to get id
Use $(this) to get the id of the select that made the change
Bind a change event handler and use this.id to get id of the event fired select tag. Although you can use $(this).attr('id') to get the id attribute value.
$('#my_select1,#my_select2').change(function() {
alert(this.id)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="my_select1">
<option value="o1" id="id1">Option1</option>
<option value="o2" id="id2">Option2</option>
</select>
<select id="my_select2">
<option value="mo1" id="mid1">MyOption1</option>
<option value="mo2" id="mid2">MyOption2</option>
</select>
I have a list like
<select name="operation" id="operation">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>
I have to get value "XXXX" if user select an option 1, for 2nd I have to get show "YYYY" and so on. And format should be like in the above means i don't have to change value="1","2","3". I need it in javascript.
Thanks
You can get it by grabbing the <select> then getting the <option> at the .selectedIndex, like this:
var sel = document.getElementById('operation');
var text = sel.options[sel.selectedIndex].text;
You can test it out here.
var dropdown = document.getElementById('operation');
var selected = dropdown[dropdown.selectedIndex].text;
probably also check for selectedIndex not being out of bounds
Try this to alert selected option's text :
<select name="operation" id="operation"
onchange="alert(this.options[this.selectedIndex].text);">
<option value="1">XXXX</option>
<option value="2">YYY</option>
<option value="3">ZZZ</option>
</select>