How to check if a value exist in select box

Question

Is there any method other than running a for loop to check if a value exists in select box using JavaScript?

I am looking for something like document.getElementById('selbox').valueExists('myval');

score 14 · Answer 1 · answered Sep 17 '17 at 18:41

14

with ecma6:

let option = document.getElementById('selbox').querySelector('[value="' + my_value + '"]');

this will find the first element that contains the attribute value="my_value".

PS: sorry by my spanglish :)

answered Sep 17 '17 at 18:41

min

141
1
2

score 10 · Answer 2 · answered Oct 07 '10 at 07:01

10

You can't extend the methods the select-element has. So there will not be a solution without an extra function to check for the existence of a value in a select.

A "solution" without a loop could be the following...

function SelectHasValue(select, value) {
    obj = document.getElementById(select);

    if (obj !== null) {
        return (obj.innerHTML.indexOf('value="' + value + '"') > -1);
    } else {
        return false;
    }
}

answered Oct 07 '10 at 07:01

Andreas

21,535
7
47
56

Another option, also slower than a loop but faster than innerHTML, changes the value of the select so only useful if you don't care about this: function SelectHasValue(select, value) { var obj = document.getElementById(select); obj.value = value; return (obj.value == value); } – Ozone Dec 28 '12 at 02:50
this is so barbaric I love it. – Alex Feb 03 '20 at 22:36

score 3 · Answer 3 · answered Mar 25 '13 at 18:57

this worked for me when the page load values from post parameters, so if value is not present on select, alert the user; else, go on (or alert):

document.getElementById('your_select_id').value = target_value;
if (document.getElementById('your_select_id').value !== target_value ){
alert('This value is not in Select');
    return;
}

score 3 · Answer 4 · answered Sep 23 '16 at 09:27

3

if(!$('#select-box').find("option:contains('" + thevalue  + "')").length){
//do stuff
}

answered Sep 23 '16 at 09:27

elaine

117
1
1

3

The questioner has requested a JavaScript solution, although jQuery is a JavaScript library, it seems safe to assume they are seeking a vanilla JS solution here. – Reggie Pinkham Jul 23 '17 at 23:00

score 2 · Answer 5 · edited May 23 '17 at 11:46

2

you can do it with jquery

Use the Attribute Equals Selector

see in

Check if value is in select list with JQuery

in javascript you can run like

 for (var i=0; i<document.getElementById('mySelect').options.length; i++)
           { 
            if (document.getElementById('mySelect').options[i].text == seachtext) 
            { 
             alert('found');
             break;
            } 
       }

edited May 23 '17 at 11:46

Community

1
1

answered Oct 07 '10 at 06:32

Haim Evgi

123,187
45
217
223

Neither do I. Was playing with some kind of join and Option.prototype. Ran into more issues than I expected :) – mplungjan Oct 07 '10 at 06:38
I just reread the question, and while it is of course possible with pure JavaScript, I'd definitely use a jQuery approach as it's going to get messy otherwise! – chigley Oct 07 '10 at 06:51

score 0 · Answer 6 · answered Aug 28 '21 at 15:45

Based on @Haim Evgi:
You can transform select.options to an array and can filter like this:
Array.from(nSelect.options).filter(nOption => /*true or false)*/ When the Array still contains options after filtering a match has happend so the length must be > 0.

Below a snippet using this by searching after value or text of the options.
First checkbox for searching after value, second after innerText searching.

function selectContainsOption(nSelect, nValue, nCheckValue, nCheckText){ // HTMLElement, ~String, ~boolean, ~boolean
    nValue = (nValue == null ? "" : nValue);
    nCheckValue = (nCheckValue == null ? true  : nCheckValue);
    nCheckText = (nCheckText  == null ? false : nCheckText);
    // get options as array, filter the array and check if there is any option left
    return (
        Array.from(nSelect.options).filter(
            nOption => (nCheckValue && nOption.value == nValue) || (nCheckText && nOption.innerText == nValue)
        ).length > 0
    );
}

<select>
    <option value="1">Zahl 1</option>
    <option value="2">Zahl 2</option>
    <option value="3">Zahl 3</option>
    <option value="4">Zahl 4</option>
    <option value="5">Zahl 5</option>
    <option value="6">Zahl 6</option>
    <option value="7">Zahl 7</option>
    <option value="8">Zahl 8</option>
    <option value="9">Zahl 9</option>
    <option value="a">Zeichen a</option>
    <option value="b">Zeichen b</option>
    <option value="c">Zeichen c</option>
    <option value="d">Zeichen d</option>
    <option value="e">Zeichen e</option>
    <option value="f">Zeichen f</option>
</select>
<b> search: </b>
<input type="text" value="0" onchange="this.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling.innerText = selectContainsOption(this.previousElementSibling.previousElementSibling, this.value, this.nextElementSibling.checked, this.nextElementSibling.nextElementSibling.checked);"/>
<input type="checkbox" checked="checked" onchange="this.previousElementSibling.onchange()"/>
<input type="checkbox" checked="checked" onchange="this.previousElementSibling.previousElementSibling.onchange()"/>
<b> contains: </b>
<span>false</span>

How to check if a value exist in select box

6 Answers6