Pass select value to javascript

Asked

Viewed 934 times

-1

when the user chooses a certain option in select, another select will appear, ie if marital status is married the spouse will appear.

I need the value of select to pass to a variable, this variable will communicate with javascript and it will do the action of hide enter the code here

window.onload = function exibir($pegavalor){
    var valor = $pegavalor;
    
    if(valor == true)
            document.getElementById('optionOculto').style.display = "block";

        else if(valor == false)
            document.getElementById('optionOculto').style.display = "none";
    };
};
}
<select name="civil" id="civil" onchange="exibir($pegavalor,'optionOculto')">
  
  <option value="0"<?=($pegavalor = 0)?> >
    -- Selecione --
  </option>

  <option value="1" <?=($pegavalor = 1)?> >
      Casado
  </option>

  <option value="2" <?=($pegavalor = 0)?> >
    Solteiro
  </option>
  
   <option value="3" <?=($pegavalor = 0)?> >
    União Estável
  </option>
  
   <option value="4" <?=($pegavalor = 0)?> >
      Divorciado
  </option>
   
  <option value="5" <?=($pegavalor = 0)?> >
    Outros
  </option>
</select>	

	<?php
		echo $pegavalor;
		if($pegavalor == 1){
			$pegavalor = true;}
		else{
			$pegavalor = false;}
	?>

<div id="optionOculto">
  Nome Conjuge <input type="text" name="n-conjug"/>
  
  Valor da Renda <input type="text" name="v-renda"/>
  
  Outras Renda <input type="text" name="o-renda"/>
</div>

javascript jquery html5

  • It is necessary to pass a variable to collect the values of "value", select ID (civil status) and select ID (hidden), because I have many conditions like this, creating a js for each would be impossible

  • There’s some php in the middle, like so?

  • I’m trying, it can’t be right rsrs, I don’t know much

  • I thought it was an error when copying the code, sorry. In fact, it is necessary to remove the parts <? ... ?> and add a System to the select’s Event "change".

1 answer

0


That part is wrong:

window.onload = function exibir($pegavalor){

You are setting the function exibir to be executed on Event onload, which is in the page load.
However, the function exibir shall be executed whenever the value of the <select> is changed, that is, in your event change.

You also need to remove php tags, and you do not need the variable $pegavalor. You can set arbitrary values for an HTML element through data-attributes. Could stay like this:

var $ = document.querySelector.bind(document);

function exibir() {
    var exibirDetalhes = this.options[this.selectedIndex].dataset.exibir;
    var detalhesEl = $(this.dataset.detalhes);

    if (this.value == "1")
        detalhesEl.style.display = 'block';

    else
        detalhesEl.style.display = 'none';
}

$('#civil').addEventListener('change', exibir);
$('#outro-select').addEventListener('change', exibir);
...

Still need to make the corrections mentioned in HTML:

<select name="civil" id="civil" data-detalhes="#optionOculto">
  <option value="0" disabled selected>Selecione</option>
  <option value="1" data-exibir="1">Casado</option>
  <option value="2" data-exibir="0">Solteiro</option>
  <option value="3" data-exibir="0">União Estável</option>
  <option value="4" data-exibir="0">Divorciado</option>
  <option value="5" data-exibir="0">Outros</option>
</select>

I’m giving preference to the method selectEl.addEventListener('change', exibir) (instead of inline js, for example. <select onchange="exibir()") because in this case I find it more interesting to leave the JS well separated from the HTML (logic separate from the presentation).

  • If you have a problem, this example is functional http://codepen.io/rodorgas/pen/NRZAwp

Browser other questions tagged javascript jquery html5

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