How to change content of a select from another select

Navigation
2

How can I put a button related to the other?

Example: 

<span class="IWLABEL10CSS" id="IWLABEL7">Distrito</span>
<select name="PAIS" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
 <option value="Indiferente">Indiferente</option>
 <option value="Portugal">PORTUGAL</option>
<option value="Brasil">BRASIL</option>
<option value="Espanha">ESPANHA</option>
</select>

and then I have another option that is the Counties. 

<span class="IWLABEL7CSS" id="IWLABEL7">Concelho</span>
<select name="CIDADE" size="1" width="195" class="COMBOCONCCSS" id="COMBOFAB" tabindex="1">
 <option value="Indiferente">Indiferente</option>
     <option value="Lisboa">Lisboa</option>
     <option value="Porto">Porto</option>
     <option value="Madrid">Madrid</option>
     <option value="Barcelona">Barcelona</option>
     <option value="Brasilia">Brasilia</option>
     <option value="São Paulo">São Paulo</option>

I choose SPAIN in the first country option and I want it to appear only in the cities BARCELONA, MADRID, etc.

    
asked by anonymous 27.03.2014 / 12:59

1 answer

4

Your question is incomplete. I can help further explain what it takes in a question, or upcoming questions, to be clear to anyone who wants to help. In Meta there is certainly a reference question but I can not find it now.

Still, here's a suggestion. In this code below I changed your duplicate ID to the second select. ID's have to be unique, and you can now have an ID in that select.

I've added a data-pais="" field to your options. So if all are in the same select you can show / hide them. 

<option data-pais="Portugal" value="Lisboa">Lisboa</option>
<option data-pais="Portugal" value="Porto">Porto</option>
<option data-pais="Espanha" value="Madrid">Madrid</option>

I also added CSS, here you can choose to remove this code completely if you want all the options to be available. 

#COMBOCID option{
    display: none;
}

jQuery 

$('select[name="PAIS"]').on('change', function(){
    var pais = this.value;
    $('select[name="CIDADE"] option').each(function(){
        var $this = $(this);
        if($this.data('pais') == pais) $this.show();
        else $this.hide();
    });
});

Example: link

    
27.03.2014 / 14:15
Android app shows error Display mysql data using angularjs / codeigniter