JS select lenght without ID

September 6, 2022

I’m trying to collect the lenght of several select. How can I know the lenght of each select? The way I found is $('#mylist option').length which seems not feasible in this case since I don’t have IDs for each select. The console.log shown below always return "1" even though there are select with multiple lines.

JS code:

$('#severalStores').find('.selectLimitInformation').each(function () {
    console.log($(this).length); //Always return "1"
});

HTML code:

<div class="row form-horizontal" id="severalStores">
    <div class="col-md-6">
        <div class="row form-horizontal">
            <div class="col-md-4">
                <label>Store AAA:</label>
            </div>
            <div class="col-md-8">
                <select class="form-control selectLimitInformation">
                    @foreach (...) //data from ViewBag
                    {
                        <option value="@storeLimit.info">@storeLimit.description</option>
                    }
                    <option value="0">Not available</option>
                </select>
            </div>
        </div>
        <div class="row form-horizontal">
            <div class="col-md-4">
                <label>Store BBB:</label>
            </div>
            <div class="col-md-8">
                <select class="form-control selectLimitInformation">
                    @foreach (...) //data from ViewBag
                    {
                        <option value="@storeLimit.info">@storeLimit.description</option>
                    }
                    <option value="0">Not available</option>
                </select>
            </div>
        </div>
        //Several other select
    </div>
</div>

>Solution :

You almost had it.

First, you loop through the selects. You don’t need to use find in your case. Then in your loop you do use find to find the length of options that are children of the select.

$('#severalStores .selectLimitInformation').each(function () {
    console.log($(this).find("option").length); //Always return "1"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row form-horizontal" id="severalStores">
    <div class="col-md-6">
        <div class="row form-horizontal">
            <div class="col-md-4">
                <label>Store AAA:</label>
            </div>
            <div class="col-md-8">
                <select class="form-control selectLimitInformation">
                       <option value="@storeLimit.info">@storeLimit.description</option>
                    <option value="0">Not available</option>
                </select>
            </div>
        </div>
        <div class="row form-horizontal">
            <div class="col-md-4">
                <label>Store BBB:</label>
            </div>
            <div class="col-md-8">
                <select class="form-control selectLimitInformation">
                        <option value="@storeLimit.info">@storeLimit.description</option>
                    <option value="0">Not available</option>
                </select>
            </div>
        </div>
        //Several other select
    </div>
</div>