Hiding a specific option from a <select> tag when clicked

Question

The <option> I want to hide is the option labeled "Select Opportunity". I want to hide this option when I have clicked on the drop down created from the <select> tag that contains the options from the array I created.

You can see the code I created here:

<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';
?>

I tried writing some JavaScript for it, but I'm really new to it, so I think I might be going wrong somewhere.

You can see the JavaScript I wrote here:

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

};

If you have any ideas on how I can hide this <option> it would be a major help!

Many Thanks,
Joshua Gomes

Answer 1

If you don't want to use jquery you can also do it with plain javascript. Because there are some problems with hiding options in IE, it would be better probably, to remove one that you didn't want. Look here to see how it works: https://jsfiddle.net/k8cx04kp/

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

If you prefer to hide you can just alter line with remove() like this:

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

Answer 2

If I understood you right, you doesn't need to do so at all.

You can simply set selected and disabled attributes at the same time for that option.

Example:

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

See jsfiddle

Disabled options aren't selectable by user, but they can be selected anyway by the selected attribute in html or by modifying its selected property by software.

So you just need to disable that option unconditionally and put the selected attribute in the proper one.

Answer 3

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

Use hide

Answer 4

Try with this script (you only need to add 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();
    }
});