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>I would like the "CARS" option to be clickable, at least the first time the select loads,
After that first click I would like to disable the "CARS" option. How can it be solved?
2
Holding an event in 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="/">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>
<select id="mySelect">
<option>Selecione</option>
</select>@dvd hour of zzzzz, Té more
1
Just do a check (with if..else or ternary) and then concatenate the value disabled in the option. Following example commented:
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>If it’s more than one figure...
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>If you wish to disable only after the event change.
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>but in that case disable it from the list, I wish it was still clickable, at least the first time the select click, then after there was a "change" it could disable it for good. Not to mention that would be massante to have to upgrade the vector AuxDisabled, does not have a more dynamic form?
@Dr.G I updated the example. It is possible to improve the vetorAuxDisabled. But it will depend on how you receive the data; Business rules etc.
I edited the question based on the AP comment above. I think it’s clear what he wants.
Browser other questions tagged javascript html jquery
You are not signed in. Login or sign up in order to post.
You want her to be disabled?
– Sam