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

Question

我要隱藏的<option>是標有“選擇機會”的選項。 當我單擊從<select>標記創建的下拉菜單時，我想隱藏此選項，該標記包含我創建的陣列中的選項。

您可以在這里看到我創建的代碼：

<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，但是我真的是新手，所以我認為我可能在某個地方出錯了。

您可以看到我在這里編寫的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>有任何想法，那將是一個很大的幫助！

非常感謝，
約書亞·戈麥斯（Joshua Gomes）

Answer 1

如果您不想使用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";

Answer 2

如果我理解正確，那么您根本不需要這樣做。

您可以簡單地同時為該選項設置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

禁用選項不被用戶選擇 ，但他們可以通過反正在選擇 selected在HTML屬性或通過修改其selected軟件特性。

因此，您只需要無條件地禁用該選項，然后將selected屬性放入適當的屬性即可。

Answer 3

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

使用隱藏

Answer 4

嘗試使用此腳本（您只需添加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();
    }
});