Question

Using JQuery, how can I check to see if a dropdown menu contains a value? By value, I don’t mean the text displayed as a menu item. I mean the ID (val) of the item. I have a list of items already in the dropdown menu, and I want to add more. Before I do that, I want to make sure I do not duplicate any key-value pairs.

Answer 1

Something like this will do what you want. (JSFiddle)

html

<select id="sel">
    <option value="foo">foo</option>
</select>
<button data-add="foo">add foo</button>
<button data-add="bar">add bar</button>

js

$('button').on('click', function() {
    var new_val = $(this).data('add');

    if ($('option[value='+new_val+']', '#sel').length) {
        alert('nope, exists!')
    } else {
        $('<option value="'+ new_val +'">'+new_val+'</option>').appendTo( $('#sel') );
    }
});

If you use an older jQuery version than 1.7 use .bind instead of .on.