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...

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...

• javascript
• jquery

Share Improve this question Follow edited Jun 27, 2014 at 7:06 Teeoney asked Jun 27, 2014 at 6:34 TeeoneyTeeoney 13122 silver badges99 bronze badges 2

• A few errors })); , myfunction - my_function – Shaunak D Commented Jun 27, 2014 at 6:37
• Shaunak, I did not copy and paste my exact code, was just typing out the idea behind it. But thanks for pointing out. – Teeoney Commented Jun 27, 2014 at 7:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

You can simply use :gt selector

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

Working Demo