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 option
s 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>
);
}
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
Replace HTML Page With Contents Retrieved Via Ajax
How to Add a ≪Script≫ Element to the Dom and Execute Its Code
How to Bind Events on Ajax Loaded Content
Dynamically Loading CSS Stylesheet Doesn't Work on Ie
How to Display Image With JavaScript
Toggle Show/Hide Div With Button
Prevent Onmouseout When Hovering Child Element of the Parent Absolute Div Without Jquery
Convert Rgb to Rgba Over White
Official Locator Strategies For the Webdriver
How to Deal With Floating Point Number Precision in JavaScript
Getcurrentposition() and Watchposition() Are Deprecated on Insecure Origins
Html Form Action and Onsubmit Issues
Will Html5 Allow Web Apps to Make Peer-To-Peer Http Connections
Bootstrap Close Responsive Menu "On Click"
How to Display a JavaScript Var in HTML Body
Bootstrap Modal Appearing Under Background