javascriptjqueryselectvariable-length

JS select length without ID


I'm trying to collect the length of several select. How can I know the length 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>