CODEWITHSUNDEEP
javascriptjqueryhtmlselectshow-hide
user3311699
user3311699

Reputation: 37

jquery - show and hide DIV with the select tag

<label for="continent">Select Continent</label>
<select id="continent" onchange="countryChange(this );">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
    <option value="Africa">Africa</option>
</select>
<br/>
<label for="country">Select a country</label>
<select id="country">
    <option value="0">Select a country</option>
</select>
<div id="soc-pri">
    <label for="company">Company</label>
    <input name="customer" type="radio" value="company" />
    <label for="private">Private</label>
    <input name="customer" type="radio" value="private" />
</div>
<div id="lib-ass">
    <label for="individual firm / freelancer">Individual Firm / Freelancer Professionista</label>
    <input name="customer" type="radio" value="privato" />
    <label for="association">Associazione</label>
    <input name="customer" type="radio" value="association" />
</div>




$(document).ready(function () {
    $("select").change(function () {
        if ($("select option:selected").val() == "Europe") {
            $('#lib-ass').show();
            $('#soc-pri').show();

        } else if ($("select option:selected").val() != "Europe") {
            $('#lib-ass').hide();
        }
    }).change();
});

Hello everyone, I just started to study jquery. I have two select fields that contain the continents and countries.

My needs nascodere show the two-DIV, "lib-ass" and "soc-first":

1) When you select the continent of Europe the DIV "lib-ass," appears. That is OK

2) When you do not select the continent Europe DIV "lib-ass", hides. That is OK

3 When you do not select the country DIV Britain the "lib-ass" must hide. This is not OK.

When you select the country DIV Britain the "lib-ass" you have to show. This is not OK

My problem is that I can not hide-show, when you select your country Britain the DIV tag with id "lib-ass."

Where am I wrong?

I hope averdato much information as possible. thanks

http://jsfiddle.net/carmy/jg7Ls/6/

Upvotes: 0

Views: 1171

Answers (2)

Matt Berkowitz
Matt Berkowitz

Reputation: 975

http://jsfiddle.net/J2XDk/1/ Is this what you're looking to do?

I made a few changes: select values can be retrieved by calling .val() directly on the select (no need for finding the selected option). I also look it up specifically using the select box ID since just doing $('select') is ambiguous. Save values to variables so you don't have to execute the jQuery multiple times. The alternate condition for the Europe check can just use else, no need to specifically check for != "Europe"

$(document).ready(function () {

    $("select").change(function () {
        var continent = $('#continent').val(),
            country = $('#country').val(),
            $libass = $('#lib-ass'),
            $socpri = $('#soc-pri');

        if (continent === "Europe") {
            $libass.show();
            $socpri.show();

        } else {
            $libass.hide();
        }

        if(country === 'Britain') {
            $libass.hide();                
        } else {
            $libass.show();   
        }

    }).change();
});

Upvotes: 1

ltalhouarne
ltalhouarne

Reputation: 4638

You could add the following to your logic:

$("#country").change(function(){
            if($("#country option:selected").val() == "Britain") {
                $('#lib-ass').show(); 
                $('#soc-pri').show();
            }else{
                $('#lib-ass').hide();
            }
 }).change();

Where country is the select box of your selected country. The hashtag (#) is used to call a specific ID in Jquery.

Here is a working example

Upvotes: 0

Related Questions