0

Bom galera tenho 3 select no meu código, sendo eles tipo, outros e margem.

Quando eu marco a opção MARGENS no select tipo o select margem aparece na tela. Até ai tudo ok.

Porem preciso que as opções some e some2 do select do outros fiquem ocultas.

Alguém sabe o que estou fazendo errado?

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>

1
  • 1
    Dentro do primeiro if você precisa setar none para os elementos de id some e some2 e no else você precisa setar block para os mesmos.
    – user21448
    Commented 7/07/2016 às 12:29

1 Resposta 1

1

O display nas options nem sempre funciona bem, no entanto pode desabilitar essas opções

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>

2
  • vlw funcionou perfeitamente, muito obrigado Commented 7/07/2016 às 12:38
  • De nada @HugoBorges. Ainda bem
    – Miguel
    Commented 7/07/2016 às 12:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .