Javascript and JQuery, how to verify if option element exists in select?

Question

Using JQuery, I'm trying to set an option as selected in a 'select' element based on the query string.

This question is similar to this, however I still need to know how to check if the element exists before performing the selection, otherwise the page will refresh itself continously (see the exit condition below).

Fetching the query string is done using the function getParameterByName, and it's working fine.

The current implementation below:

function setSelectedItem(selectName, itemToSelect) {
    ///<summary>Selects an HTML option element inside a HTML select element based on the value from the query string.</summary>
    ///<param name="selectName" type="string">The partial name of the HTML select in which 'itemToSelect' must be selected</param>
    ///<param name="itemToSelect" type="string">The name of the query string parameter which value is the of the 'option' element to select.</param>

    //If an items has already been selected, return
    if ($('select[name*=' + selectName + ']')[0].selectedIndex != 0) return;


    //Fetches the value from the query string; if empty, returns
    var valueToSelect = getParameterByName(itemToSelect);
    if (valueToSelect == "") return;

    //Fecthes the HTML select object
    var selectObject = $('select[name*=' + selectName + ']');

    //HERE how to check if 'valueToSelect' does not exist and return?

    selectObject.val(valueToSelect).attr('selected', 'selected').change();
}

Update: The solution which worked was:

    //Checks if the option exists, and returns otherwise
    if (!selectObject.find('option[value=' + valueToSelect + ']').length)
        return;

Setting the value with `.val()` will select that item, so why do you also use `.attr('selected','selected')`? — nnnnnn, Mar 14 '12 at 08:39

score 19 · Accepted Answer · edited Apr 22 '15 at 12:43

19

try to check selectObject.find('option[value="'+valueToSelect +'"]').length > 0

edited Apr 22 '15 at 12:43

Sachin

2,152
1
21
43

answered Mar 14 '12 at 08:15

Deniss Kozlovs

4,761
2
28
35

There are many way to do this but I think this one is the simplest way. Thanks! – berdem Sep 01 '12 at 17:03
3

It seems more safe to wrap the value of `valueToSelect` in quotes: `selectObject.find('option[value="'+valueToSelect +'"]').length()` – MartyIX Feb 17 '14 at 19:39
Good, but if I have a select like this: {"Dog","Cat","Fish"} and I search for "cat" (note the lower case), did not match. – candlejack Nov 05 '16 at 14:44
@MartinVseticka why seems more 'safe'? – candlejack Nov 05 '16 at 14:45
@alessadro It's similar to SQL injection. Typically, you don't want to allow `valueToSelect` to change meaning of the selector. – MartyIX Nov 05 '16 at 15:01
@MartinVseticka Cross-site scripting!? – candlejack Nov 05 '16 at 20:46
@MartinVseticka `.length()` is not a function, `.length` is correct – albanx Jan 18 '17 at 17:40

score 2 · Answer 2 · answered Mar 14 '12 at 08:15

2

Check the length of the selector:

var selectObject = $('select[name*=' + selectName + ']');
if (selectObject.length == 0)
    return;
selectObject.val(valueToSelect).attr('selected', 'selected').change();

Or use the implicit boolean conversion in javascript:

var selectObject = $('select[name*=' + selectName + ']');
if (!selectObject.length)
    return;

selectObject.val(valueToSelect).attr('selected', 'selected').change();

answered Mar 14 '12 at 08:15

gdoron

147,333
58
291
367

See, I don't want to check if the select object exists, instead I need to check if valueToSelect exists. I'm checking the answer from @Dennis – H.Scheidl Mar 19 '12 at 12:26
Conversely, it should be same :D So I just use the code selectObject.find('option[value='+ valueToSelect +']').length() – H.Scheidl Mar 19 '12 at 12:37

score 0 · Answer 3 · answered Mar 14 '12 at 08:33

You could use .length>0 to check if the element does exist. But if you are running this code over and over again it get's kind of annoying so I have written a little plugin which ensures that kind of functionality:

/* doesExist PLUGIN (c) MS */
/* (c) Michael Stadler(MS), */
(function($){
$.fn.doesExist = function()
{
return jQuery(this).length > 0;
};
})(jQuery);

Usage:

$('#myDiv').doesExist() // returns a boolean

Javascript and JQuery, how to verify if option element exists in select?

3 Answers3

Linked

Related