Prevent a value from being selected in the dropdown

Asked

Viewed 70 times

2

Is there any way to prevent a value from being selected in a dropdown? For example:

document.getElementById('teste').onchange = function (event){
  var valor = this.value;
  if(valor == 4){
    alert('esse valor não pode!');
    event.preventDefault();
    return false;
  }
}
<select id="teste">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

In the snippet above, if the value is 4, it should cancel the selection, and keep the value that was selected before. What’s the right way to do this? Initially, I’m thinking of saving the value and selecting via javascript if you cannot select a certain value. I accept solutions with or without jquery

javascript jquery

  • The way you thought is valid, besides having thousands of ways to do it, but basically, you’re thinking the right way

  • @Rafaelaugusto thought there was some way to cancel the event :(

  • 1

    Can you explain why the value cannot be selected? Depending on the case you could give a 'disabled' in the <option>.

  • I believe I haven’t, at least I’ve never used, but I could be wrong. Soon the Sergio appears here is concretized the answer.

  • @Renatodiniz is that depending on the options he has added in another listbox, certain values cannot be selected in the dropdown in question, and as it can change the values of the list at any time, I found it simpler to check the options of the list each change than to control the option which must be disabled or not

  • Why don’t you put one disabled option using the onchage previous listbox? As @Renatodiniz proposed, it would be easier and even better.

  • Even if you want to do it this way that you want to do, which I think is valid too, I would suggest that when the person chooses option "4", instead of switching to the value that was selected before, switch to the first optionsame. I find this resource superfluous.

  • When the person selects the "4", gives the alert and everything and goes back to the first option with document.getElementById('teste').selectedIndex = 0;. Simple and without many codes.

Show 3 more comments

3 answers

2

It is possible to return to the original value using $.date, which stores information in the DOM of the element itself. This avoids the use of global variables or field creation only to store this value. $.data, or $(element). data, works with key/value, thus:

$(document).ready(function(){

$("#teste").data('current', $("#teste").val()); // guarda o valor inicial do select com a chave "current"

$("#teste").on("change", function (event){

  var valor = $(this).val();
  if(valor == 4){
    alert('esse valor não pode!');
    $(this).val($.data(this, 'current')); // retorna ao valor inicial/anterior
    return false;
  }
   $(this).data('current', $(this).val()); // atualiza com o novo valor que foi possível selecionar
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="teste">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

2


Leave the option enabled for the user to select it, and wait for it to do so to display an alert saying it can’t... That’s ugly! All that’s left is for the alert to contain the words "pegadinha do malandro!" to complete the insult :\

The most elegant way is to simply disable the option:

<select>
    <option>Muito</option>
    <option>obrigado</option>
    <option>por</option>
    <option>serem</option>
    <option disabled>você não</option>
    <option>os</option>
    <option>melhores</option>
    <option>exemplos</option>
    <option>selecionáveis</option>
</select>

Simple, short and easier to do, understand and maintain.

  • Yeah, I think in the end it will be better if I change the way I’m doing and disable the option, it’s better for the user! Thanks

1

Using Vanilla.

document.getElementById('teste').onclick = function (event){
if(event.target.options) el = event.target.options[event.target.options.selectedIndex]; 
}
document.getElementById('teste').onchange = function (event){
	if(this.value == 4) el.selected = true;
}
<select id="teste">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Browser other questions tagged javascript jquery

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