How to Remove All the Options of a Select Box and Then Add One Option and Select It with Jquery

How do you remove all the options of a select box and then add one option and select it with jQuery?

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

jQuery select list removes all options

this would do:

$('#selectId').html('');

jQuery remove options from select box

Try this:

html

<div class="box">

</div>

<button class="add">Add</button>

js

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= $("select").val();

    if(a!="")
        $("option[value='" + a + "']").remove();

 $('.box').append($select_box);

});

fiddle

Ok i change a bit, try this version please:

js

$(".add").on("click", function(){ 
    $select_box = '<div><select><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>0){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);

});

fiddle

For your last request:

js

$(".add").on("click", function(){ 
    $select_box = '<div><select onchange="ddlChange(this);"><option value="v1">Value 1</option><option value="v2">Value 2</option><option value="v3">Value 3</option></select></div>';
var ddl = $($select_box).children();

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>0){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);

});

window.ddlChange = function(ddl){

    var a= new Array();
    var i=0;
    $("select").each(function(){               
        a[i] = $(this).val();
        i++;
    });

    if(a.length>1){
        for(var j=0; j<a.length; j++){
            $(ddl).find("option[value='"+a[j]+"']").remove();
        }
    }

 $('.box').append(ddl);

};

fiddle

Remove all options in select but the first

Try this code:

var selectList  = $("#ProductionOrderNameSelectId");
selectList.find('option').not(':first').remove();

This will look for the options, and remove all except the first

Also not sure what you target refers to in target.selectList('option:gt(0)').remove();

var selectList  = $("#ProductionOrderNameSelectId");selectList.find('option').not(':first').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select data-productlistaction="/ProductionOrder/ProductionOrderData" id="ProductionOrderNameSelectId" name="ProductionOrders">   <option value="">Production Orders</option>   <option value="ProOrd_001">ProOrd_001</option></select>

removing all options of select box except 1st option

The easiest way to clear the options in the way you're describing is by using options.length = 1. Also, you can leverage the fact that each drop down clears the ones that logically follow it, so that you only need to declare a single change handler.

$('#lForm select').on('change', function() {
  if (this.selectedIndex > 0) {
    var $others = $(this).closest('table').find('select'),
    current = $others.index(this); // find current

    while (++current < $others.length) {
      // for each following drop down
      $others.get(current).options.length = 1;
    }
  }
});

Demo

I'm not sure how you're going to repopulate the drop downs though :)

Remove existing selected option on another Select Box

I think this could work as it basically should loop through all your selects on the page on page load and figure out what should or shouldn't be shown depending on the page load selected options.

Here's the fiddle: https://jsfiddle.net/yps07yf5/3/

function checkTheDropdowns(){
  var arr  = $('select').find(':selected');
  $('select').find('option').show();
  $.each($('select'), function(){  
    var self = this;
    var selectVal = $(this).val();
    $.each(arr, function(){         
        if (selectVal !== $(this).val()){
                $(self).find('option[value="'+$(this).val()+'"]').hide()
        } else {
                $(self).find('option[value="'+$(this).val()+'"]').show()
        }
    });
 })
};
checkTheDropdowns();
$('select').on('change', checkTheDropdowns);

With that you should be able to change one and then it would be removed from all the rest, also it should update all when one changes.

remove all options from select jquery but only one

select all options, then exclude the one with that value :

$('#lstCities option[value!="0"]').remove();

FIDDLE

JQuery - Remove all option from Selectbox except for first and selected

.not only takes 1 parameter. If you want to filter on two different selectors, you can add a comma between them inside the string. You can also use the :selected selector:

$('option', this).not(':eq(0), :selected').remove();

See Updated Fiddle: http://jsfiddle.net/znx9hxvu/9/

jQuery remove options from select

Try this:

$(".ct option[value='X']").each(function() {
    $(this).remove();
});

Or to be more terse, this will work just as well:

$(".ct option[value='X']").remove();

---

Related Topics