Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 13722
  • Last Modified:

Using jQuery show/ hide options of one select box based on the value selected of another select box

I have 4 select boxes one is called BillCountries, ShipCountries and  BillStates, ShipStates

I am running small javascript based on jQuery that if the country selected is CA and then in the States Select Box just display all the options of Canadian Provinces, other wise for any other country just display the default US States

The problem is the script works fine in FireFox but any other browser like Chrome or IE it does not work at all, when I select the country as CA it just does not display the Canadian Provinces. Instead just displays Select State

here is sample of BillCountries & ShipCountries Select Box

<select name="BillCountry" id="BillCountry">
<option value="">Select Country</option>
<option value="AS">American Samoa</option>
<option value="AQ">Antarctica</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdon</option>
<option value="US">United States</option>
</select>

<select name="ShipCountry" id="ShipCountry">
<option value="">Select Country</option>
<option value="AS">American Samoa</option>
<option value="AQ">Antarctica</option>
<option value="CA">Canada</option>
<option value="UK">United Kingdon</option>
<option value="US">United States</option>
</select>

Open in new window

now for the States
<select name="BillStates" id="BillStates">
<option value="">Select State</option>
<option class="us-states" value="AA">Armed Forces - Americas</option>
<option class="us-states" value="AE">Armed Forces - Europe</option>
<option class="us-states" value="AP">Armed Forces - Pacific</option>
<option class="us-states" value="AL">Alabama</option>
<option class="us-states" value="AK">Alaska</option>
<option class="us-states" value="AZ">Arizona</option>
<option class="ca-states" value="AB">Alberta</option>
<option class="ca-states" value="BC">British Columbia</option>
<option class="ca-states" value="MB">Manitoba</option>
<option class="ca-states" value="NB">New Brunswick</option>
<option class="ca-states" value="NF">Newfoundland</option>
</select>

<select name="ShipStates" id="ShipStates">
<option value="">Select State</option>
<option class="us-states" value="AA">Armed Forces - Americas</option>
<option class="us-states" value="AE">Armed Forces - Europe</option>
<option class="us-states" value="AP">Armed Forces - Pacific</option>
<option class="us-states" value="AL">Alabama</option>
<option class="us-states" value="AK">Alaska</option>
<option class="us-states" value="AZ">Arizona</option>
<option class="ca-states" value="AB">Alberta</option>
<option class="ca-states" value="BC">British Columbia</option>
<option class="ca-states" value="MB">Manitoba</option>
<option class="ca-states" value="NB">New Brunswick</option>
<option class="ca-states" value="NF">Newfoundland</option>
</select>

Open in new window

Here is the script I am using
<script type="text/javascript">
 $(document).ready(function() {  
   $("#BillCountry").change(function () {
     if($("#BillCountry").val()=='CA'){
	    $(".us-states").css("display", "none");
		$(".ca-states").css("display", "block");
		} else {
		 $(".us-states").css("display", "block");
		$(".ca-states").css("display", "none");	 
   }
   });
   
      $("#ShipCountry").change(function () {
     if($("#ShipCountry").val()=='CA'){
	    $(".us-states").css("display", "none");
		$(".ca-states").css("display", "block");
		} else {
		 $(".us-states").css("display", "block");
		$(".ca-states").css("display", "none");	 
   }
   });
   
});
</script>

Open in new window


Thanks a lot
0
niceoneishere
Asked:
niceoneishere
  • 7
  • 7
  • 2
2 Solutions
 
GaryCommented:
You cannot 'hide' an option tag in a dropdown (except in FF).
I suggest you separate your options into hidden divs and then when a country is selected you replace the content of the state dropdown with the relevant state options.

Example here
http://jsfiddle.net/GaryC123/pM5fn/1/
0
 
leakim971PluritechnicianCommented:
Test page : http://jsfiddle.net/77y8q/

jQuery(function($) {
    var backupShipStates = $("#ShipStates").html();
    $("#ShipCountry").change(function() {
        var country = $(this).val().toLowerCase();
        var options = $(backupShipStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == country; });
        $("#ShipStates").html(options);
    });
});

Open in new window

0
 
niceoneishereAuthor Commented:
Thanks for replying, Gary one quick question is it necessary to add the class to countries because I have over 200 countries

and Savant its not working in Chrome and IE

Thanks again
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
Leakim's solution won't work in IE8 and lower because filter wasn't added til IE9

For my solution, you need someway to tie the option to the div and a class the easiest way.
Another way could be to select by index - so the first country will target the first div, the second country the second div and so on.
0
 
niceoneishereAuthor Commented:
Thanks Gary appreciate it, so where would I be adding select by index sir
0
 
GaryCommented:
0
 
leakim971PluritechnicianCommented:
0
 
GaryCommented:
@ niceoneishere

Leakim's solution above should work fine as well.
Ignore my comment about the filter - its wrong as far as jQuery is concerned
0
 
niceoneishereAuthor Commented:
Thanks Gary and Leakim and yes I started new and Leakim solution works but I have couple of questions,

First in Leakim Solution if any country other than US or CA is selected hid the State Select box completely and display a input type text box so the customer can enter the state

Thanks again and appreciate it
0
 
niceoneishereAuthor Commented:
Hi Guys I am looking to extend this solution so if you guys want me to close and open one more question I can. Please let me know

THanks
0
 
GaryCommented:
Which solution are you using?
0
 
niceoneishereAuthor Commented:
Thanks for replying Gary, Sir I went with Leakim solution as I was able to integrate with my custom shopping cart code. here is the final code I ended up with

<script type="text/javascript">
$(document).ready(function($) {
    var backupBillStates = $("#BillStates").html();
    $("#BillCountry").change(function() {
        var bcountry = $(this).val().toLowerCase();
        var options = $(backupBillStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == bcountry; });
        $("#BillStates").html(options);
    });
   
    var backupShipStates = $("#ShipStates").html();
    $("#ShipCountry").change(function() {
        var scountry = $(this).val().toLowerCase();
        var options = $(backupShipStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == scountry; });
        $("#ShipStates").html(options);
    });
	
	
});
</script>

Open in new window


Here is what I am trying to achieve

1) Default states should always be US States as my default country is US but for some reason when the page is displayed the first time its showing both US and Canadian Provinces

2) I have a input text box like below

			<div class="other-states">
				<label class="italic" for="ShipState">Other State/Province:</label>
				<input type="text" name="ShipStates" id="OtherShipStates" value="" class="textfield">
			</div>

Open in new window


Is there anyway this input only shows for any country other than US and CA, at the same time hide BillStates and ShipStates for other countries except US and CA.

I know I can extend the above script but I am getting confused where I would add the if clause

Thanks and appreciate it
0
 
GaryCommented:
<script>
$(document).ready(function($) {
    var backupBillStates = $("#BillStates").html();
    $("#BillCountry").change(function() {
        var bcountry = $(this).val().toLowerCase();
        var options = $(backupBillStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == bcountry; });
        $("#BillStates").html(options);
    });
   
    var backupShipStates = $("#ShipStates").html();
    $("#ShipCountry").change(function() {
        var scountry = $(this).val().toLowerCase();
        var options = $(backupShipStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == scountry; });
        $("#ShipStates").html(options);
    });
	
	$("#BillCountry").val("US").trigger("change")
});
</script> 

Open in new window

0
 
niceoneishereAuthor Commented:
Thanks appreciate it, I extend it more to hide and show the billstates and input text box like below but the if clause is not firing properly sir, whats happening is if the countries are US and CA, the input text div is being hidden as it set to hide by default but
if I select any other country nothing happens.

<script type="text/javascript">
$(document).ready(function($) {
    var backupBillStates = $("#BillStates").html();
    $("#BillCountry").change(function() {
        var bcountry = $(this).val().toLowerCase();
        var options = $(backupBillStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == bcountry; });
        $("#BillStates").html(options);
    });
   
    var backupShipStates = $("#ShipStates").html();
    $("#ShipCountry").change(function() {
        var scountry = $(this).val().toLowerCase();
        var options = $(backupShipStates).filter(function() { return !$(this).attr("class") || $(this).attr("class").substr(0,2) == scountry; });
        $("#ShipStates").html(options);
    });
	
	$("#BillCountry").val("US").trigger("change")
	
	if($("#BillCountry").val()=='US' || $("#BillCountry").val()=='CA') {
	      $("#bill-states").css("display", "block");
		  $("#OtherBillState").css("display", "none");
	}else if($("#BillCountry").val()!=='US' || $("#BillCountry").val()!=='CA') {
	      $("#bill-states").css("display", "none");
		  $("#OtherBillState").css("display", "block");        
	}
	
    if($("#ShipCountry").val()=='US' || $("#ShipCountry").val()=='CA') {
	      $("#ship-states").css("display", "block");
		  $("#OtherShipState").css("display", "none");
	}else if($("#ShipCountry").val()!=='US' || $("#ShipCountry").val()!=='CA') {
	      $("#ship-states").css("display", "none");
		  $("#OtherShipState").css("display", "block");        
	}
});
</script>

Open in new window


I  have wrapped the BillStates and ShipStates select box inside a div's like below

<div id="bill-states">
<select id="BillStates"> </select>
</div>
<div id="OtherBillStates">
<input type="text" value="" />
</div>

<div id="ship-states">
<select id="ShipStates"> </select>
</div>
<div id="OtherShipStates">
<input type="text" value="" />
</div>

Open in new window

0
 
GaryCommented:
...
var bcountry = $(this).val().toLowerCase();
if(bcountry=="us" || bcountry=="ca"){
     $("#OtherShipStates input").hide()
}
else{
     $("#OtherShipStates input").show()
}
...

Open in new window

0
 
niceoneishereAuthor Commented:
Thanks Guys :)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 7
  • 7
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now