Pass value from select to javascript

Question

Pass value from select to javascript

Navigation

#1 by (0 votes)

-1

When the user chooses a particular option in the select, another select will appear, that is, if the marital status is married, the conjugate appears.

I need the value of select to pass to a variable, this variable will communicate with the javascript and it will do the hide action insert 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

asked by anonymous 20.10.2016 / 00:51

1 answer

Convert data, how to proceed? Query MySQL generating error when using the OR clause

score 0 · Accepted Answer

This part is wrong:

window.onload = function exibir($pegavalor){

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

You must also remove the php tags, and you do not need the $pegavalor variable. You can set arbitrary values for an HTML element using data-attributes . It could look 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);
...

You still need to make the corrections mentioned in the 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 selectEl.addEventListener('change', exibir) method (instead of inline js, eg <select onchange="exibir()" ) because in that case I find it more interesting to leave JS well separated from HTML.