Removing an Item from a Select Box

Removing an item from a select box

Remove an option:

$("#selectBox option[value='option1']").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select name="selectBox" id="selectBox">  <option value="option1">option1</option>  <option value="option2">option2</option>  <option value="option3">option3</option>  <option value="option4">option4</option> </select>

Removing an item from a select box depending on the value of the selectbox

Wire an event handler to the select's change event.

When that event fires calculate the difference between the total number of rooms available and the user's selected option.

Hide all options with a value greater than this difference and show all others.

Assuming the last option will always be the greatest number of rooms this snippet will work.

$('#selectBoxStandard').change(function() {  var sel = $(this);  var opts = this.options;  var max = parseInt(opts[opts.length - 1].value);  var val = parseInt($(sel).val());  var remaining = max - val;  $(opts).each(function(i, e) {    if (parseInt($(e).val()) <= remaining) {      $(e).show();    } else {      $(e).hide();    }  });});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label> <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select></div>

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')
;

Remove selected option from another select box

Try this : Instead of removing options from the list you can show / hide it, so that if user change selected option then same option should get restored in rest of the select boxes.

$(document).ready(function(){
$('select').on('change', function(event ) {
//restore previously selected value
var prevValue = $(this).data('previous');
$('select').not(this).find('option[value="'+prevValue+'"]').show();
//hide option selected
var value = $(this).val();
//update previously selected data
$(this).data('previous',value);
$('select').not(this).find('option[value="'+value+'"]').hide();
});
});

DEMO

Remove values from select list based on condition

Give an id for the select object like this:

<select id="mySelect" name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>
</select>

You can do it in pure JavaScript:

var selectobject = document.getElementById("mySelect");
for (var i=0; i<selectobject.length; i++) {
if (selectobject.options[i].value == 'A')
selectobject.remove(i);
}

But - as the other answers suggest - it's a lot easier to use jQuery or some other JS library.

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();

Delete Item in Select Box on State Change in React-Select (MultiSelect)

You will need to sync your updated option to your Select component too:

You will need to use a new state and update them accordingly.

So it's become:

import "./styles.css";
import { useState } from "react";
import Select from "react-select";
import { Button } from "@material-ui/core";

export default function App() {
const [items, setItems] = useState([
{ id: 1, text: "Text 1" },
{ id: 2, text: "Text 2" },
{ id: 3, text: "Text 3" }
]);

const [options, setOptions] = useState([]);

const deleteItem = (getID) => {
setItems(items.filter((single) => single.id !== getID));
setOptions(options.filter((single) => single.id !== getID));
};

return (
<div className="App">
<div style={{ marginTop: 40, marginBottom: 40 }}>
{items.map((data) => (
<li>
{data.text}
<Button
onClick={() => deleteItem(data.id)}
color="primary"
style={{ marginLeft: 20 }}
>
Delete
</Button>
</li>
))}
</div>

<Select
isMulti
isSearchable
maxMenuHeight={200}
isClearable={false}
options={items}
getOptionLabel={(option) => option.text}
getOptionValue={(option) => option.text}
value={options}
onChange={(options) => setOptions(options)}
/>
</div>
);
}

Edit Delete Selected Item on State Update in React-Select (forked)

How to remove a selected item from a dropdown list (Using Jquery)

Use the eq selector.

var index = $('#cmbTaxID').get(0).selectedIndex;
$('#cmbTaxID option:eq(' + index + ')').remove();

This is the best way to do it because it's index-based, not arbitrary value-based.



Related Topics



Leave a reply



Submit