jquery selectbox remove all options except two (selector variable name)

Question

I have the following select box

<select name="loc_id_1" id="loc_id_1">
<option value="PLS" selected="selected">-- PLEASE SELECT --</option>
<option value="NEW">-- ADD NEW --</option>
<option value="1">Smith Company</option>
<option value="6">Jones Company</option>
<option value="23">Wright Company</option>
</select>

There are multiple of these on the page loc_id_2, loc_id_3, etc all with different info. I am using the following to detect a change in any of them.

$("[id^=loc_id_]").change(function(){
/// my magic code
var lc_id = $(this).attr('id');
my_function(lc_id,data1,data2);
});

This part works great. The problem I am running into is as part of this code, I call a function that can refresh the data in the changed select box. so I use the jquery remove function to refresh the selectbox

function my_function(id,d,f) {
var sel = $("#" + id);
sel.find('option[value!="NEW"] option[value!="PLS"]').remove();

// ajax code that calls database to append the other entries to the selectbox
}

The problem is, this removes the "ADD NEW" option, but leaves the "PLEASE SELECT" but my options from the database are added just fine.

Any idea how to fix this...

Answer 1

Your selector will look for descendant inside the option element which is having the value NEW.Try,

sel.find('option[value!="NEW"][value!="PLS"]').remove();

DEMO

Answer 2

You can simply use :gt selector

sel.find('option:gt(1)').remove();

Working Demo