CODEWITHSUNDEEP
jqueryhtmldrop-down-menu
rp3220
rp3220

Reputation: 60

Hide Dropdown based on selection of user Jquery

Here default the state drop down is loaded
my country dropdown is

  <select id="countrydrp" name="countrydrp" class="required" onchange="changeStateType();">
                        <option value="">Select State</option>
                        <option value="US">USA</option>
                        <option value="IN">INDIA</option>
                        //some more options
  </select>

my state drop down is

 <select id="statedrp" name="statedrp"  style="width: 80px; padding: 5px; height: 30px; width: 215px;" class="" onchange="validteSelected();">
                        <option value="">Select State</option>
                        <option value="AK">Alaska</option>
                        <option value="AL">Alabama</option>
                        //some more options
  </select>
  <input type="text" id="statetxt" name="statetxt" class="text" data-error-type="inline" />

if user selects option other than US from Country dropdown

I am trying to hide state drop down and show the textbox as given

my Script is

  $(document).ready(function () {
        $("#statetxt").hide();//i am hiding the textbox on page loads
    }); 

 function changeStateType() {
        debugger;
        var selVal = $("#countrydrp option:selected").val();
        if (selVal == "US") {
            $("#statetxt").hide();
            $("#statedrp").show();
            $("#statedrp").addClass("required");  
        }
        else {
            $("#statetxt").show();
            $("#statedrp").hide();
            $("#statetxt").addClass("required");
        }
    }

now the problem is both are showing after the i select any country option

If i Select Tunsia(other than US) Then the dropdown and the textbox appearsI Selected Tunsia Then the dropdown and the textbox appears

If i Select United States Then the two dropdowns appears I Selected United States Then the two dropdowns appears

Upvotes: 2

Views: 1191

Answers (3)

Alex Char
Alex Char

Reputation: 33228

I think you are looking for this:

$("#countrydrp").on("change", function() {
  //hide state if country is different than US
  $("#statedrp").toggle($(this).val() == "US");
  //show input text if country is different than US
  $("#statetxt").toggle($(this).val() != "US");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="countrydrp" name="countrydrp" class="required" onchange="changeStateType();">
  <option value="">Select State</option>
  <option value="US">USA</option>
  <option value="IN">INDIA</option>
</select>
<select id="statedrp" name="statedrp" style="width: 80px; padding: 5px; height: 30px; width: 215px;" class="" onchange="validteSelected();">
  <option value="">Select State</option>
  <option value="AK">Alaska</option>
  <option value="AL">Alabama</option>
</select>
<input type="text" id="statetxt" name="statetxt" class="text" data-error-type="inline" />

Upvotes: 2

Milind Anantwar
Milind Anantwar

Reputation: 82251

you can use .val() along with select selector to get selected option value:

var selVal = $("#countrydrp").val();

working Demo

Upvotes: 4

Suchit kumar
Suchit kumar

Reputation: 11869

get the value using:

var selVal = $("#countrydrp").val();

not this: 

 var selVal = $("#countrydrp option:selected").val();// this will also give the same value but not a good one to apply .val();

I see your code is already working just remove the debugger;

function changeStateType() {
        var selVal = $("#countrydrp option:selected").val();
        if (selVal == "US") {
            $("#statetxt").hide();
            $("#statedrp").show();
            $("#statedrp").addClass("required");  
        }
        else {
            $("#statetxt").show();
            $("#statedrp").hide();
            $("#statetxt").addClass("required");
        }
    }

Upvotes: 0

Related Questions