How do I count the number of <option>
s in a <select>
DOM element using jQuery?
<select data-attr="dropdown" id="input1">
<option value="Male" id="Male">Male</option>
<option value="Female" id="Female">Female</option>
</select>
I want to find the number of <option>
tags in the <select>
DOM element, since with that I want to open the settings panel with that number of input fields with the corresponding option value from the drop-down box in it and to change it again in the preview panel.
The above drop-down box is in my preview panel which is generated by jQuery.
This question is related to
javascript
jquery
html
jquery-selectbox
In a multi-select option box, you can use $('#input1 :selected').length;
to get the number of selected options. This can be useful to disable buttons if a certain minimum number of options aren't met.
function refreshButtons () {
if ($('#input :selected').length == 0)
{
$('#submit').attr ('disabled', 'disabled');
}
else
{
$('#submit').removeAttr ('disabled');
}
}
$('#input1 option').length;
This will produce 2
.
You can use either length property and length
is better on performance than size
.
$('#input1 option').length;
OR you can use size function like (removed in jQuery v3)
$('#input1 option').size();
$(document).ready(function(){
console.log($('#input1 option').size());
console.log($('#input1 option').length);
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select data-attr="dropdown" id="input1">
<option value="Male" id="Male">Male</option>
<option value="Female" id="Female">Female</option>
</select>
_x000D_
The best form is this
$('#example option').length
Another approach that can be useful.
$('#select-id').find('option').length
The W3C solution:
var len = document.getElementById("input1").length;
Your question is a little confusing, but assuming you want to display the number of options in a panel:
<div id="preview"></div>
and
$(function() {
$("#preview").text($("#input1 option").length + " items");
});
Not sure I understand the rest of your question.
Ok, i had a few problems because i was inside a
$('.my-dropdown').live('click', function(){
});
I had multiples inside my page that's why i used a class.
My drop down was filled automatically by a ajax request when i clicked it, so i only had the element $(this)
so...
I had to do:
$('.my-dropdown').live('click', function(){
total_tems = $(this).find('option').length;
});
Source: Stackoverflow.com