Enable select only when the previous select option is chosen

Question

Enable select only when the previous select option is chosen

Asked 4 years, 5 months ago

Viewed 57 times

0

Staff I need the select 2 for the withdrawal unit to be enabled only if the select 1 option equals "Withdrawal". Can you help me?

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
    <input type="text" name="input" id="input" disabled>
    <br><br>
    <label>Selecione a opção de recebimento do pedido</label>
    <select id="options" onchange="verifica(this.value)">
    <option value="2">1 - Delivery</option>
    <option value="3">2 - Retirada</option>
    </select>
    <br>
    <br>
    <label>Selecione a unidade que irá retirar o do pedido</label>
    <select id="options" onchange="verifica(this.value)">
    <option value="2">1 - Unidade </option>
    <option value="3">2 - Unidade</option>
    </select>
    </body>
    </html>

1 answer

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.

by Rogerio Santos • **552** points · Answer 1 · 2020-06-30T21:08:18+00:00

See if the value is equal 3 place or remove the attribute disabled, do not need to call the function in the second select, following the code you did:

function verifica(v) {
  if(v == 3)document.getElementById("options2").removeAttribute("disabled"); 
  else document.getElementById("options2").setAttribute("disabled", "disabled");
}

HTML:

    <input type="text" name="input" id="input" disabled>
    <br><br>
    <label>Selecione a opção de recebimento do pedido</label>
    <select id="options" onchange="verifica(this.value)">
    <option value="2">1 - Delivery</option>
    <option value="3">2 - Retirada</option>
    </select>
    <br>
    <br>
    <label>Selecione a unidade que irá retirar o do pedido</label>
    <select id="options2" disabled>
    <option value="2">1 - Unidade </option>
    <option value="3">2 - Unidade</option>
    </select>

id is a unique field, do not use for more than one element.

Fiddlw: https://jsfiddle.net/7shLcpvk/