How to show/Hide Div On Select Option

#1

Hi Everyone!

I have a country select option dropdown like this.

not chosen:

<select name="billing[country_id]" id="billing:country_id" class="not_chosen">
<option value="">Please choose a country...</option><option value="AF">
Afghanistan</option><option value="AX">
Åland Islands</option><option value="AL">
Albania</option><option value="DZ">
Algeria</option><option value="AD">
Andorra</option><option value="AO">
Angola</option><option value="AI">
Anguilla</option><option value="AG">
Antigua and Barbuda</option><option value="AR">
Argentina</option><option value="AW">
Aruba</option><option value="AU">
Australia</option><option value="AT">
Austria</option><option value="AZ">
Azerbaijan</option><option value="BS">
Bahamas</option><option value="BH">
Bahrain</option><option value="BD">
Bangladesh</option><option value="BB">
Barbados</option><option value="BY">
Belarus</option><option value="BE">
Belgium</option><option value="BZ">
Belize</option><option value="BJ">
Benin</option><option value="BM">
Bermuda</option><option value="BT">
Bhutan</option><option value="BO">
Bolivia</option><option value="BA">
Bosnia and Herzegovina</option><option value="BW">
Botswana</option><option value="BR">
Brazil</option><option value="VG">
British Virgin Islands</option><option value="BN">
Brunei</option><option value="BG">
Bulgaria</option><option value="BF">
Burkina Faso</option><option value="BI">
Burundi</option><option value="KH">
Cambodia</option><option value="CM">
Cameroon</option><option value="CA">
Canada</option><option value="CV">
Cape Verde</option><option value="KY">
Cayman Islands</option><option value="CF">
Central African Republic</option><option value="TD">
Chad</option><option value="CL">
Chile</option><option value="DK">
Denmark</option><option value="FR">
France</option><option value="DE">
Germany</option><option value="IN">
India</option><option value="IE">
Ireland</option><option value="IL">
Israel</option><option value="IT">
Italy</option><option value="MX">
Mexico</option><option value="NL">
Netherlands</option><option value="NZ">
New Zealand</option><option value="NO">
Norway</option><option value="ES">
Spain</option><option value="SE">
Sweden</option><option value="CH">
Switzerland</option><option value="GB">
United Kingdom</option><option value="US">
United States</option>
</select>

chosen:

<select name="billing[country_id]" id="billing:country_id" class="">
<option value="">Please choose a country...</option>
<option value="AF">
Afghanistan</option><option value="AX">
Åland Islands</option><option value="AL">
Albania</option><option value="DZ">
Algeria</option><option value="AD">
Andorra</option><option value="AO">
Angola</option><option value="AI">
Anguilla</option><option value="AG">
Antigua and Barbuda</option><option value="AR">
Argentina</option><option value="AW">
Aruba</option><option value="AU">
Australia</option><option value="AT">
Austria</option><option value="AZ">
Azerbaijan</option><option value="BS">
Bahamas</option><option value="BH">
Bahrain</option><option value="BD">
Bangladesh</option><option value="BB">
Barbados</option><option value="BY">
Belarus</option><option value="BE">
Belgium</option><option value="BZ">
Belize</option><option value="BJ">
Benin</option><option value="BM">
Bermuda</option><option value="BT">
Bhutan</option><option value="BO">
Bolivia</option><option value="BA">
Bosnia and Herzegovina</option><option value="BW">
Botswana</option><option value="BR">
Brazil</option><option value="VG">
British Virgin Islands</option><option value="BN">
Brunei</option><option value="BG">
Bulgaria</option><option value="BF">
Burkina Faso</option><option value="BI">
Burundi</option><option value="KH">
Cambodia</option><option value="CM">
Cameroon</option><option value="CA">
Canada</option><option value="CV">
Cape Verde</option><option value="KY">
Cayman Islands</option><option value="CF">
Central African Republic</option><option value="TD">
Chad</option><option value="CL">
Chile</option><option value="DK">
Denmark</option><option value="FR">
France</option><option value="DE">
Germany</option><option value="IN">
India</option><option value="IE">
Ireland</option><option value="IL">
Israel</option><option value="IT">
Italy</option><option value="MX">
Mexico</option><option value="NL">
Netherlands</option><option value="NZ">
New Zealand</option><option value="NO">
Norway</option><option value="ES">
Spain</option><option value="SE">
Sweden</option><option value="CH">
Switzerland</option><option value="GB">
United Kingdom</option><option value="US">
United States</option>
</select>

I would like when it’s not chosen to hide the div, and when it’s chosen I would like to show the div and toggle if back if not chosen again.

I’ve tried many different ways that I found on Google but none really show/hide.

Any help will be greatly appreciated.

#2

Please help me. I see that the chosen / not chosen <select>s have different class values

<select name="billing[country_id]" 
id="billing:country_id" 
class="not_chosen"> 
... 
<select name="billing[country_id]" 
id="billing:country_id" 
class=""> 

But other than that, the two examples look the same to me. Is “the div” in the <option>s somewhere I’m not seeing?

And it would be helpful if in addition to the HTML, you post the JavaScript that is adding / removing the class value and any for “the div”.

1 Like
#3

Actually I thought it was a default script. But I found it and it’s to change font colors on all selectors. But for the div hide/show I need it to only work on the country selector.

<script>
jQuery(document).ready(function(n){
n("select").length&&n.each(n("select"),function(t,i){
var r=n(i);
r.val()||r.addClass("not_chosen");
r.on("change",function(){
r.val()?r.removeClass("not_chosen"):r.addClass("not_chosen")
})
})
});
</script>
<style>
.form-list select.not_chosen{color:#afadad}
.form-list  select option{color:#000}
.form-list  select option:first-child{color:#afadad}
</style>

The “div” I just added it around all the address fields so they won’t show until the country is selected.

Thank you

#4

If that div is a sibling, or a descendant of a sibling of the select, you might just use CSS as you’re already toggling the not_chosen class anyway; e.g.

.not_chosen + .address_fields {
  display: none;
}
<select class="not_chosen">...</select>
<div class="address_fields">...</div>

Sounds like you might want to use a fieldset here.

#5

Hi

I tried adding:

.not_chosen + .address_fields {
  display: none;
}

But it didn’t work, I guess it’s not a sibling of the select.

Thank you

#6

I’ve been trying to get this to work:

<?php $_countries = Mage::getResourceModel('directory/country_collection')->loadByStore()->toOptionArray(false) ?>
<?php if (count($_countries) > 0): ?>
    <select name="billing[country_id]" id="billing:country_id">
        <option value=""><?php echo $this->__('Please choose a country...') ?></option>
        <?php foreach($_countries as $_country): ?>
            <option value="<?php echo $_country['value'] ?>">
                <?php echo $_country['label'] ?>
            </option>
        <?php endforeach; ?>
    </select>
<?php endif; ?>					
                        <?php /* echo $this->getCountryHtmlSelect('billing') */ ?>
                    </div>
            </div>
        </li>

<script>
jQuery(document).ready(function($){ 
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".address_fields").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".address_fields").hide();
            }
        });
    }).change();
});});
</script>

	<div class="address_fields">
...fields here
</div>

It makes the div not show but when something is selected it doesn’t make the div show.

#7

Yes, it looks like the select is again nested in 2 more divs and a list item (where’s the closing list tag though?), so child / sibling combinators from the not_chosen class won’t work here.

There exists no element that matches this selector for any option value AFAICT.

#8

Hi

I found something that is working for me:

 <?php if (count($_countries) > 0): ?>
    <select name="billing[country_id]" id="billing:country_id" class="billing_country" onchange="changeStateType();">
        <option value=""><?php echo $this->__('Please choose a country...') ?></option>
        <?php foreach($_countries as $_country): ?>
            <option value="<?php echo $_country['value'] ?>">
                <?php echo $_country['label'] ?>
            </option>
        <?php endforeach; ?>
    </select>
<?php endif; ?>					
                    </div>
            </div>
        </li>

<style>
#address_fields{display:none}
</style>
<script>
function changeStateType() {
       // debugger;
        var selVal = jQuery(".billing_country").val();
    //alert(selVal)
        if (selVal == "") {
            jQuery("#address_fields").hide();

        }
        else {
            jQuery("#address_fields").show();
        }
    }
</script>

The only problem is that if the person has already selected an option the div doesn’t show because apparently the onchange hasn’t happened. So I think I need some kind of function that goes by when the select is in “selected” mode. I can find tons of stuff online about showing/hiding if a certain option is selected but none where any option has been or gets selected.