hide option with javascript

Question

hide option with javascript

Navigation

#1 by (1 votes)

0

Well, I have 3 select in my code, being tipo , outros and margem .

When I set the MARGENS option to select tipo select margem appears on the screen. Until then everything ok.

However, the options some and some2 of select of outros are hidden.

Does anyone know 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><styletype="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>

javascript jquery

asked by anonymous 07.07.2016 / 14:21

1 answer

PHP - Display BD MySQL Images I doubt how to use the IF in a TRIGGER in mysql

score 1 · Accepted Answer

The display in the options does not always work well, however you can 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><styletype="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>