How to change content of a select from another select

Asked

Viewed 6,999 times

5

How can I put a button related to each 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 which is the Councils.

<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 option PARENTS and I want it to appear only In the cities BARCELONA, MADRID, etc.

php html
  • 1

    Javascript/jQuery is required

  • With jQuery you can do this.

  • and how this function is called in javascript?

  • You would need a json file with all countries and cities. and then when you selected the country you would pick the selected one and do the search within the json to bring the cities related to the country, but I believe it would be too big to be answered here.. but I’ll see what I can get for you... wait...

  • And you already have all the code on the page or go to search via Ajax?

  • I have everything on the same page.

  • OK. Post the code you have and the answer is very easy.

  • Got it like this. The two option buttons.

Show 3 more comments

2 answers

6


Your question is incomplete. I can help more to explain what it takes in a question, or next questions, to be clear to those who want to help. At the Meta there’s definitely a question reference but I can’t find it now.

Still, here is a hint. In this code below I changed your duplicate ID to the second select. ID’s have to be unique, and by the way it’s handy to have an ID in this select.

I added a field data-pais="" in 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 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: http://jsfiddle.net/XH42p/

  • 1

    @user3253195, here is a new version: http://jsfiddle.net/XH42p/

-2

I think you could use this script

<select name="odin" id="odin" onchange="turnTo(this)">
        <option value="Vaca">Vaca</option>
        <option value="Boi">Boi</option>
        <option value="Ovelha">Ovelha</option>
    </select>
    <select name="thor" id="thor">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
    <script>
        function turnTo(source){
            var slc = document.getElementById(source.id);
            var opcaoTexto = slc.options[slc.selectedIndex].text;
            var opcaoValor = slc.options[slc.selectedIndex].value;
            console.log(opcaoValor + "\n" + opcaoTexto);

            var scdSelect = document.getElementById('thor');
            var vlOption = scdSelect.options[scdSelect.selectedIndex].value = opcaoValor;
            var vlTextOption = scdSelect.options[scdSelect.selectedIndex].text = opcaoValor;
            console.log(vlOption + "\n" + vlTextOption);
        }        
    </script>

Browser other questions tagged php html

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