如何從選擇框中刪除選項

-1

如果選擇了room2和room4，我試圖從選擇框中刪除最後2個選項。我無法讓它工作。有任何想法嗎？同樣在第三個選擇框，如果選項更多被選中我想7天自動被選中並顯示警報：聯繫辦公室長期停留。如何從選擇框中刪除選項

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

來源

2016-11-26 hijacker83

使用這種@ Hijacker83 $（」 #cost_calculator_person選項[value ='5']「）。rem OVE（）; – PRABA

@ hijacker83爲您的日期選擇答案已更新 –

嘗試一下本作你的下一個編輯的問題

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

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

來源

2016-11-26 11:50:24

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

來源

2016-11-26 11:25:03

$（「＃cost_calculator_person選項[value ='5']，選項[value ='6']」）。remove（）;還有作品不用再寫id了 –

非常感謝。有時解決方案可以非常簡單:)在我編輯我的文章之前，您的回覆太快了。在第三個選擇框中，如果選擇更多選項，我也希望自動選擇值'7'。如果你能解釋如何去做，我將不勝感激。 – hijacker83

你可以使用片。

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

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

來源

2016-11-26 11:39:13 PLT

也有效。謝謝。爲什麼===被使用，但不是==當選擇「更多」選項時，有關如何自動選擇選項'7'的任何想法？ – hijacker83

使用=== js也會匹配類型。 – PLT

例如。 1 =='1'= true 1 ==='1'= false '1'==='1'= true。 – PLT

嘗試這樣的財產以後...

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

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

來源

2016-11-26 12:04:52

如何從選擇框中刪除選項

回答

相關問題