Select options does not work using jquery

Asked

Viewed 116 times

0

With this select

<label>Quantos módulos fiscais a sua propriedada tem:</label>
<select id="fiscalModule">
  <option value="minifundio">até 1 módulo fiscal</option>
  <option value="small_propertie">maior que 1 e até 2 módulos fiscais</option>
  <option value="medium_propertie">maior que 2 a até 4 módulos fiscais</option>
  <option value="secondCategorie_medium_propertie">maior que 4 a até 10 módulos fiscais</option>
  <option value="bigPropertie">maior que 10 módulos fiscais</option>
</select>

I can return if the value of the first option

[value = "foundry"]

was selected:

let fiscalModule = document.querySelector('select[id=fiscalModule]');  
let isMinifundio = fiscalModule.options[fiscalModule.selectedIndex].value == 'minifundio' ? true : false;

However I can not return the other options, as

[value = "bigPropertie"]

Here’s my link to jsfiddle

javascript jquery javascript-events

  • I don’t know, but it seems that when you choose the state, the list of cities should change. And it doesn’t. So, the problem should be bigger. Personally, I find it very complicated to use jQuery for this... Great classic of libraries: it seems nice, easy, but when you start having trouble.... Put an Alert in Ubmit to see the content you receive from select.

  • Our girl, 1° that code posted has nothing to do with jQuery, 2nd of course can only return the first option, because in this part of the code == 'minifundio' ? true : false; does the check with the first option only, as could return the other?!!

  • dear, of course you have more check options. thank you

2 answers

1

To get the selected value just use fiscalModule.value. And you don’t need JQuery for that reason.

Follow an example:

let fiscalModule = document.getElementById('fiscalModule');

fiscalModule.onchange = function(){
  //fiscalModule.value
  console.log(this.value);
}
<label>Quantos módulos fiscais a sua propriedada tem:</label>
<select id="fiscalModule">
  <option value="minifundio">até 1 módulo fiscal</option>
  <option value="small_propertie">maior que 1 e até 2 módulos fiscais</option>
  <option value="medium_propertie">maior que 2 a até 4 módulos fiscais</option>
  <option value="secondCategorie_medium_propertie">maior que 4 a até 10 módulos fiscais</option>
  <option value="bigPropertie">maior que 10 módulos fiscais</option>
</select>

To perform a different operation for each value you can make one switch. See the example below using the fiddle code you sent:

let fiscalModule = document.querySelector('select[id=fiscalModule]');

switch(fiscalModule.value){
  case "minifundio":
    var minifundio = city.num;
    $('#module').val(minifundio);
    $('#dimension').val(minifundio);
    break;
  case "bigPropertie":
    console.log(isBigPropertie, 'isBigPropertie')
    var big_propertie = (city.num * 10)
    $('#module').val(big_propertie);
    $('#propertieClassification').text('grande propriedade rural (latifúndio');
    break;
  case "small_propertie":
    ...
}

0

To get the value of select with jQuery just do the following:

HTML

<label>Quantos módulos fiscais a sua propriedada tem:</label>
<select id="fiscalModule">
  <option value="minifundio">até 1 módulo fiscal</option>
  <option value="small_propertie">maior que 1 e até 2 módulos fiscais</option>
  <option value="medium_propertie">maior que 2 a até 4 módulos fiscais</option>
  <option value="secondCategorie_medium_propertie">maior que 4 a até 10 módulos fiscais</option>
  <option value="bigPropertie">maior que 10 módulos fiscais</option>
</select>

jQuery:

var fiscalModule = $('#fiscalModule'). val();

Browser other questions tagged javascript jquery javascript-events

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