mercredi 19 septembre 2018

JS if statement to hide / show multiple divs

Firstly - I'm a bit green with JS so please go easy! I'm trying to show / hide 2 different divs based on selection of a country. Basically if a user select UK it shows a UK address div, and if they select any other country, an international div appears.

Ultimately, I only want 1 div to appear at a time, so need them to toggle on and off based on selection.

I have used an existing solution to get to the stage I'm at:

var Privileges = jQuery('#country');
var select = this.value;
Privileges.change(function () {
    if ($(this).val() == 'United Kingdom UK') {
        $('.lookupbox').show();
        $('.manualbox').hide()
    }
   else $('.manualbox').show();
             $('.lookupbox').hide(); 
});

<div>
<label>Country:</label>
<select name="country" id="country" class="fullselect" 
onclick="craateUserJsObject.ShowPrivileges();">
    <option value="all">All</option>
    <option value="United Kingdom UK">United Kingdom UK</option>
    <option value="Vietnam VN" >Vietnam VN</option>
    <option value="Vanuatu VU" >Vanuatu VU</option>
    <option value="Wallis And Futuna Islands WF" >Wallis And Futuna Islands 
    WF</option>
    <option value="Western Samoa WS" >Western Samoa WS</option>
</select>
</div>
<div class="lookupbox"style=" display: block;">UK Lookup Box</div>
<div class="manualbox" style=" display: none;">International Input Box</div>

I assume that there's something incredibly basic that I'm missing, so any help would be greatly appreciated!

Aucun commentaire:

Enregistrer un commentaire