JS select length without ID

Question

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>

Any reason you're using jQuery? But even with that: both plain JS and jQuery use CSS query selectors, so if you want "all select elements", then you literally query for that: $(`select`) or document.querySelectorAll(`select`). — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 6, 2022 at 18:13
...or document.querySelectorAll("select .selectLimitInformation"). — bloodyKnuckles
– bloodyKnuckles, Commented Sep 6, 2022 at 18:24
@rd1218 don't tell "me", tell everyone by putting that in your post and adding the jQuery tag — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Sep 6, 2022 at 20:03

imvain2 · Accepted Answer · 2022-09-06 18:25:10Z

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>

Collectives™ on Stack Overflow

JS select length without ID

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related