hijacker83 hijacker83 - 6 days ago 5
HTML Question

how to remove option from a selectbox

I am trying to remove the last 2 option from the selectbox if room2 and room4 is selected. I couldn't make it work. Any ideas?
Also on the 3rd selectbox if option More is selected I want 7 days automatically to be selected and show an alert: contact office for long stay.



$('#calculator_accomodation').change(function(){
if($(this).val() == 'ROOM2' || $(this).val() == 'ROOM4' ){

$("#cost_calculator_person").option("5").remove();
$("#cost_calculator_person").option("6").remove();
alert('room2 is triggered')
}
});
$('#cost_calculator_days').change(function(){
if($(this).val() == 'More' ) {
alert('Contact office for long stay');
// code to select '7' goes here
}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="calculator_accomodation" name="calculator_accomodation">
<option value="ROOM1">ROOM ONE</option>
<option value="ROOM2">ROOM TWO</option>
<option value="ROOM3">ROOM TREE</option>
<option value="ROOM4">ROOM FOUR</option>
<option value="ROOM5">ROOM FIVE</option>
<option value="ROOM6">ROOM SIX</option>
<option value="ROOM7">ROOM SEVEN</option>
<option value="ROOM8">ROOM EIGHT</option>
</select>
<select id="cost_calculator_person" name="cost_calculator_person">
<option value="1">1 PERSON</option>
<option value="2">2 PEOPLE</option>
<option value="3">3 PEOPLE</option>
<option value="4">4 PEOPLE</option>
<option value="5">5 PEOPLE</option>
<option value="6">6 PEOPLE</option>
</select>
<select name="cost_calculator_days" id="cost_calculator_days">
<option selected="" 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>
<option value="More">More</option>
</select>




Answer

There is no method like option() in jQuery instead use attribute equals selector to get the element with a certain attribute value.

$('#calculator_accomodation').change(function() {
  if (this.value == 'ROOM2' || this.value == 'ROOM4') {
    $("#cost_calculator_person option[value='4'],#cost_calculator_person option[value='6']").remove();
    alert('room2 is triggered')
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="calculator_accomodation" name="calculator_accomodation">
  <option value="ROOM1">ROOM ONE</option>
  <option value="ROOM2">ROOM TWO</option>
  <option value="ROOM3">ROOM TREE</option>
  <option value="ROOM4">ROOM FOUR</option>
  <option value="ROOM5">ROOM FIVE</option>
  <option value="ROOM6">ROOM SIX</option>
  <option value="ROOM7">ROOM SEVEN</option>
  <option value="ROOM8">ROOM EIGHT</option>
</select>
<select id="cost_calculator_person" name="cost_calculator_person">
  <option value="1">1 PERSON</option>
  <option value="2">2 PEOPLE</option>
  <option value="3">3 PEOPLE</option>
  <option value="4">4 PEOPLE</option>
  <option value="5">5 PEOPLE</option>
  <option value="6">6 PEOPLE</option>
</select>

Comments