hide <option> with javascript

Question

Good guys I have 3 select in my code, being them tipo, outros and margem.

When I mark the option MARGENS in the select tipo the select margem appears on the screen. So far everything ok.

But I need the options some and some2 of select of outros stay hidden.

Someone knows what I’m doing wrong?

function mostraForm(valor) {
  if (valor === "MA") {
    document.getElementById("margem").style.display = "block";
    document.getElementById("some").style.display = "block";
    document.getElementById("some2").style.display = "block";
  } else {
    document.getElementById("margem").style.display = "none";
    document.getElementById("some2").style.display = "none";
    document.getElementById("some").style.display = "none";
  }
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
  #margem {
    display: none;
  }
</style>

<table align="center">
  <tr>
    <td>
      <select name='tipo' onchange="mostraForm(this.value)">
        <option value='R$'>R$</option>
        <option value='%'>%</option>
        <option value='MA'>MARGENS</option>
      </select>
      
      <select name='outros'>
        <option value='MA'>MARGENS</option>
        <option value='so' id="some">some</option>
        <option value='so2' id="some2">some2</option>
      </select>
    </td>
  </tr>
  <tr id="margem">
    <td>
      <select name='margem'>
        <option value='com'>COMISSÃO</option>
        <option value='des'>DESCONTO</option>
        <option value='cre'>CRÉDITO</option>
      </select>

    </td>
  </tr>
</table>

Answer 1

Display in options does not always work well, however it may disable these options

function mostraForm(valor) {
  if (valor === "MA") {
    document.getElementById("margem").style.display = "block";
    document.getElementById("some").disabled = true;
    document.getElementById("some2").disabled = true;
  } else {
    document.getElementById("margem").style.display = "none";
    document.getElementById("some2").disabled = false;
    document.getElementById("some").disabled = false;
  }
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style type="text/css">
  #margem {
    display: none;
  }
</style>

<table align="center">
  <tr>
    <td>
      <select name='tipo' onchange="mostraForm(this.value)">
        <option value='R$'>R$</option>
        <option value='%'>%</option>
        <option value='MA'>MARGENS</option>
      </select>
      
      <select name='outros'>
        <option value='MA'>MARGENS</option>
        <option value='so' id="some">some</option>
        <option value='so2' id="some2">some2</option>
      </select>
    </td>
  </tr>
  <tr id="margem">
    <td>
      <select name='margem'>
        <option value='com'>COMISSÃO</option>
        <option value='des'>DESCONTO</option>
        <option value='cre'>CRÉDITO</option>
      </select>

    </td>
  </tr>
</table>