How to show/Hide Div On Select Option

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.

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

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

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.

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

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.

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.

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.