How to disable an option when creating it with jquery

Question

How to disable an option when creating it with jquery

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

vetorAux = ["CARROS","Ferrari","Porshe"];
vetorAux.forEach(function(item){
     $('select').append('<option>' + item + '</option>');
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body><select></select></body></html>

Iwouldlikethe"CARS" option to be clickable, at least the first time the'select' loads,

After this first click I would like to disable the "CARS" option. How can it be resolved?

javascript html jquery

asked by anonymous 04.05.2018 / 03:50

2 answers

score 2 · Answer 1

Performing an event on the first option does not work!

See an example - by clicking Pagina 1 nothing happens! Only if you first click on another option and then click on it.

    function irPara( ) {
    var list = document.forms[0].urlList.value;
    console.log (list);
    }

    <form>
    <select name="urlList" size="1" onChange="irPara( )" style=" font-family: ; color:#F5F5F5; background-color:navy; font-size:13px">
    <option value="https://pt.stackoverflow.com/">Pagina 1</option>
    <option value="https://google.com/">Pagina 2</option>
    <option value="https://uol.com/">Pagina 3</option>
    </select>
    </form>

So the solution is to put an option in the first position for English, see capisce?

vetorAux = ["CARROS","Ferrari","Porshe"];
vetorAux.forEach(function(item){
     $('select').append('<option value="' + item + '">' + item + '</option>');
});



$('#mySelect').change(function() {
  $("#mySelect option[value='CARROS']").prop("disabled",true);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body><selectid="mySelect">
 <option>Selecione</option>
</select>

score 1 · Answer 2

Just do a check (with if..else or ternary ) and then concatenate the disabled value in option . Here is the commented example:

vetorAux = ["CARROS","Ferrari","Porshe"];
vetorAux.forEach(function(item){

  /**
   * Verifica se o item é o mesmo que CARROS,
   * caso seja, adiciona "disabled" na variável (informando que o item será desabilitado)
   * caso contrário, adiciona um valor vazio.
   */
  let disabled = (item == "CARROS") ? "disabled" : "";

  /* Concatena os valores */
  $('select').append('<option ${disabled}>${item}</option>');
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body><select></select></body></html>

Ifmorethanonevalue...

vetorAux = ["CARROS","Ferrari","Porshe"];

/* Indica os valores que deverão ser desabilitados */
vetorAuxDisabled = ["CARROS","Ferrari"];

vetorAux.forEach(function(item){

  /**
   * Verifica se o item está entre os valores que deverão ser desabiltiados,
   * caso esteja, adiciona "disabled" na variável (informando que o item será desabilitado)
   * caso contrário, adiciona um valor vazio.
   */
  let disabled = (vetorAuxDisabled.indexOf(item) >= 0) ? "disabled" : "";

  /* Concatena os valores */
  $('select').append('<option ${disabled}>${item}</option>');
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><body><select></select></body></html>

Ifyouwanttodisableonlyafterthechangeevent.

const select = document.querySelector("select")

const vetorAux = ["CARROS","Ferrari","Porshe"]

/* Indica os valores que deverão ser desabilitados */
const vetorAuxDisabled = ["CARROS","Ferrari"];

vetorAux.forEach(function(item){
  $('select').append('<option>${item}</option>')
});

select.addEventListener("change", el => {

  select.querySelectorAll("option").forEach( item => {
    /**
     * Verifica se o item está entre os valores que deverão ser desabiltiados,
     * caso esteja, desabilita
     */
    if (vetorAuxDisabled.indexOf(item.textContent) >= 0) {
      item.setAttribute("disabled", true)
    }
  })
})

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<select>
</select>

</body>
</html>