Question

如果选择room2和room4，我试图从选择框中删除最后2个选项。我无法使它发挥作用。有任何想法吗？同样在第3个选择框上，如果选择了更多选项，我希望自动选择 7天并显示提醒：联系办公室以便长期逗留。

＆＃13;

    $('#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
      }
    });

＆＃13;

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

＆＃13;

Answer 1

你可以使用切片。

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

        $('#cost_calculator_person').find('option').slice(4, 6).remove();
        alert('room2 is triggered');
    }
});

Answer 2

在下一个已编辑的问题中尝试此操作

$('#cost_calculator_days').change(function(){

      if($(this).val() == 'More' ) { 
    $("#cost_calculator_days option[value='7']").prop('selected',true);
    // code to select '7' goes here
      }
    });

Answer 3

jQuery中没有类似option()的方法，而是使用attribute equals selector来获取具有特定属性值的元素。

$('#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>

Answer 4

尝试这样的事情......

＆＃13;

$(document).ready(function() {

      $('#calculator_accomodation').change(function(){
        var val = $(this).val();
        if (val == 'ROOM2' || val == 'ROOM4' ) {
           $("#cost_calculator_person option[value='4']").css('display','none');
           $("#cost_calculator_person option[value='6']").css('display','none');
        } else {
           $("#cost_calculator_person option[value='4']").css('display','block');
           $("#cost_calculator_person option[value='6']").css('display','bolck');
        }
      });
      $('#cost_calculator_days').change(function(){
        if($(this).val() == 'More' ) {
          alert('Contact office for long stay');
        }
      });
  });

＆＃13;

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

＆＃13;

如何从选择框中删除选项

4 个答案: