Can’t you use onclick in a select option?

Asked

Viewed 367 times

0

I have a script that when clicking on a specific option would call a function in javascript with onclick, but this script is only working in firefox desktop in other browsers does not work, I’ve been suspecting that the problem is being caused by using onclick in options, Is there any alternative way I can achieve what I want without using onclick? , you really shouldn’t use onclick in a select option?

My select:

<select class="custom-select" name="tamanho" id="tamanho" required="required">
        <option selected value="Nenhum">Escolha...</option>
        <option value="G" onclick="mostraG()">Grande (G)</option>
        <option value="M" onclick="mostraM()">Média (M)</option>
      </select>

My JS:

// Mostra M e oculta G
function mostraM(){
    if (document.getElementById('pizzaM').style.display == "none"){
        document.getElementById('pizzaM').style.display = "block",
    document.getElementById('pizzaG').style.display = "none",
    $("#sabor1G").val("Nenhum"),
    $("#sabor2G").val("Nenhum"),
    console.log("WORK");
    }
}
// Mostra G e culta M
function mostraG(){
    if (document.getElementById('pizzaG').style.display == "none"){
        document.getElementById('pizzaG').style.display = "block",
    document.getElementById('pizzaM').style.display = "none",
    $("#sabor1M").val("Nenhum"),
    $("#sabor2M").val("Nenhum"),
    console.log("WORK");
    }
}
javascript html5 html-select

  • Have you tried with $('#tamanho').on.('change', function(){})

  • Could you show me an example?

  • Yes. Just a moment

  • What do you really need done in your select? If you want to perform a function when each option is selected the best option is onchange in select. https://answall.com/questions/365402/gostaria-de-saber-como-receber-o-valor-do-meu-select-ao-clicar-em-um-option-com/365408#365408

  • https://answall.com/questions/238457/como-ativar-um-onchange-que-utiliza-options-de-um-select-via-javascript

2 answers

3


You can do it like this:

$('#tamanho').on('change', function () {
  let value = $(this).val()

  if (value == 'G') {
    mostraG()
  } else {
    mostraM()
  }
});

function mostraM() {
  console.log("mostraM");
}

function mostraG() {
  console.log("mostraG");
}
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<select class="custom-select" name="tamanho" id="tamanho" required="required">
        <option selected value="Nenhum">Escolha...</option>
        <option value="G" >Grande (G)</option>
        <option value="M" >Média (M)</option>
</select>

2

You can use the $('#tamanho').on('change', function(){ to choose the options

Look at the example

$('#tamanho').on('change', function(){
  const value = $(this).val()
  if( value == 'Nenhum' ){
     nenhum()
  }
  else{
    if( value == 'G' ){
       mostraG()
    }else{
      mostraM()
    }
  }
})


const mostraM = () =>{
   $('.pizzaM').fadeIn()
   $('.pizzaG').fadeOut()
}

const mostraG = () =>{
   $('.pizzaM').fadeOut()
   $('.pizzaG').fadeIn()
}

const nenhum = () =>{
   $('.pizzaM').fadeOut()
   $('.pizzaG').fadeOut()
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<select class="custom-select" name="tamanho" id="tamanho" required="required">
        <option selected value="Nenhum">Escolha...</option>
        <option value="G" >Grande (G)</option>
        <option value="M" >Média (M)</option>
</select>

<div class="pizzaM" style="display:none">
  Pizza M
</div>

<div class="pizzaG" style="display:none">
  Pizza G
</div>

I hope it helps

Browser other questions tagged javascript html5 html-select

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