單擊時隱藏<select>標記的特定選項

<option>我想隱藏的是標有「選擇機會」的選項。當我點擊從包含我創建的數組中的選項的<select>標記創建的下拉列表時，我想隱藏此選項。單擊時隱藏<select>標記的特定選項

你可以看到我在這裏創造的代碼：我試着寫一些JavaScript它

<form action="/shop/<?php echo $duration_link; ?>" method="get"> 
<select name="filter_duration" id="filter_duration"> 
    <?php 

     if(empty($_GET['company'])) { 
      ?><option value="hi" selected>Select Duration</option> 
     <?php 
     }else{ 
      ?> 
      <option value="" disabled selected>Select Duration</option> <!-- 
This disables the option, but it woiuld be ideal to hide it when clicked. 
      <option value="">Clear Duration</option> 
      <?php 
     } 
     foreach ($duration_array as $duration_title => $duration_time) { 
      ?><option value="<?=$duration_time?>"><?=$duration_title?> 
</option> <!-- This sets the different options for the drop down with the 
duration array --> 
      <?php 
     } 
     ?> 
</select> 
<!-- Duration: <input type= "text" name= "filter_duration"> --> 
<input type="submit"> <!-- This creates a button to submit the information - 
-> 
</form> 
<?php 
$duration = $_GET['filter_duration']; 
$duration_link = '?filter_duration=' . $duration . 
'&query_type_duration=or#individuals-top'; 
?>

，但我真的很新，所以我想我可能會去的地方不對。

您可以看到的JavaScript我在這裏寫下：

var e = document.getElementById("filter_duration"); 
var strDuration = e.options[e.selectedIndex].text; 

e.onclick = function(){ 

if(strDuration == "Select Opportunity") { 

strDuration['Select Opportunity'].style.display = block; 
} 

};

如果你對我怎樣可以隱藏這個<option>任何想法這將是一個重大的幫助！

非常感謝，
約書亞·戈麥斯

來源

2017-09-14 Josh Gomes

的可能的複製[隱藏選項使用jQuery選擇列表（https://stackoverflow.com/questions/1271503/hide- options-in-a-select-list-using-jquery） – ControlAltDel

隱藏選項在IE瀏覽器中不起作用。您可能需要考慮刪除/添加選項。 –

如果你不想使用jquery你也可以用普通的JavaScript做到這一點。因爲在IE中隱藏選項存在一些問題，所以最好刪除一個你不想要的選項。看看這裏，看看它是如何工作的：https://jsfiddle.net/k8cx04kp/

document.querySelector("select").onclick = function() { 
    document.querySelector("option[value='hi']").remove(); 
}

如果要隱藏你可以改變符合remove()這樣的：

document.querySelector("option[value='hi']").style.display = "none";

來源

2017-09-14 15:44:05

$(document).ready(function(){ 
    $('#filter_duration').on('click',function(){ 
      $("#filter_duration option[value='hi']").hide(); 
     }); 
     });

使用隱藏

來源

2017-09-14 15:23:01 Revamp

如果我理解你的權利，你並不需要完全可以這樣做。

您可以簡單地爲該選項同時設置selected和disabled屬性。

實施例：

<select> 
    <option value="" selected disabled>Select duration</option> 
    <option value="1">1 minute</option> 
    <option value="2">2 minutes</option> 
    <option value="3">3 minutes</option> 
</select>

jsfiddle參見

禁用選項不可可選擇由用戶，但它們可以通過HTML中的selected屬性或通過修改其屬性selected選擇反正由軟件。

因此，您只需要無條件地禁用該選項，並將selected屬性放在適當的位置。

來源

2017-09-14 15:56:56 bitifet

嘗試使用這個腳本（您只需要添加的JQuery）

$("#filter_duration").on('change', function (e) { 
    var optionSelected = $("option:selected", this); 
    var valueSelected = this.value; 
    if(optionSelected.text() == 'Select Opportunity') { 
     $('option[value="'+valueSelected+'"]', this).remove(); 
    } 
});

來源

2017-09-14 16:04:58

單擊時隱藏<select>標記的特定選項

回答

相關問題