using .length but returning that 1 even it is empty javascipt

Question

I had a multiple select box below.

<select multiple="multiple" id="states" name="states[]">
     <option value="1">Alaska</option>
     <option value="2">Florida</option>
</select>

Then in my JQuery

var states;
if($('#states').length < 1) {
    console.log('no states', $('#states').length);
    states = "undefined";
} else {
    console.log('has states', $('#states').length);
    states = $('#states').val();
}

In my comparison, if the array has no value or even has 2 or more, the array length still returns 1. My goal here is if it doesn't have a value selected, it would return undefined else the values in the multiple select.

I also tried this one. If no values selected.

var states;
if(!$('#states').val()) {
   console.log('no states', $('#states').length);
   states = "undefined";
} else {
   console.log('has states', $('#states').length);
   states = $('#states').val();
}

*"if the array has no value or even has 2 or more"* It can't have 2 or more (and it's not an array), jQuery optimizes simple selectors that start with a `#` into a call to `getElementById`, so `$("#some_id")` will **never** return a jQuery object with `length` of anything greater than `1`. It will always be `0` (there was no matching element) or `1` (there was). (This is true even if your HTML is invalid and has more than one element with the ID.) — T.J. Crowder, Dec 07 '22 at 07:17
By far the most likely explanation here is observation error or misunderstanding. To be clear, `$("#select")` selects the element with `id="select"`, and `.length` on that tells you how many elements matched the selector (see above, it will be `0` or `1`). If you wanted the select's *value*, use `.val()` (but it's not clear to me what you're looking for). Please update your question with a [mcve] demonstrating the problem, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button); [here's how to do one](https://meta.stackoverflow.com/questions/358992/). — T.J. Crowder, Dec 07 '22 at 07:18
Probable dupe: https://stackoverflow.com/questions/3243476/how-to-get-multiple-select-box-values-using-jquery — Andy, Dec 07 '22 at 07:22
by the way if you wanted to know the number of options in your selects, the correct selector would be `$('#states option').length` I'm afraid the reasons of your doubts stay on what you give for granted but you are taking wrong. The selector `#states` returns the element with the id `states` and that's just one. The `option`s inside are many but it requires another selector to get them. Plus the `.val()` or `.value` (in vanilla js) returns the `value` attr of the picked option. Maybe you want to return its description — Diego D, Dec 07 '22 at 07:42

Amirhossein · Answer 1 · 2022-12-07T09:15:59.207

0

Hope it helps:

const handleOnChange = (event) => {
    var selectedStates;
    const selectElement = $('#state-select');
    const values = selectElement.val();
    if(values.length < 1) {
        console.log('no states', values.length);
        selectedStates = undefined;
    } else {
        console.log('has states', values.length);
        selectedStates = values;
    }
    console.log(selectedStates);
}

<select onchange="handleOnChange()" multiple="multiple" id="state-select" name="states[]">
    <option value="1">Alaska</option>
    <option value="2">Florida</option>
</select>

edited Dec 07 '22 at 09:15

answered Dec 07 '22 at 08:08

Amirhossein

1,819
1
6
10

I also tried this```if(!$('#states').val()) { }``` Yes , I want to know if there is a selected values or none – boldsinas101 Dec 07 '22 at 08:16
So you want to check if there is any selected value and then set it to the `states` variable ? – Amirhossein Dec 07 '22 at 08:24
yes I want to check if there is – boldsinas101 Dec 07 '22 at 08:54
@boldsinas101 I edited my answer. Check the new one. – Amirhossein Dec 07 '22 at 09:16

using .length but returning that 1 even it is empty javascipt

1 Answers1