Solved

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

Posted on 2014-03-27
16
13,209 Views
Last Modified: 2014-03-31
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
Comment
Question by:niceoneishere
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
  • 2
16 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39959376
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
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 200 total points
ID: 39959560
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
 
LVL 1

Author Comment

by:niceoneishere
ID: 39959751
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
Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

 
LVL 58

Expert Comment

by:Gary
ID: 39959835
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
 
LVL 1

Author Comment

by:niceoneishere
ID: 39959846
Thanks Gary appreciate it, so where would I be adding select by index sir
0
 
LVL 58

Expert Comment

by:Gary
ID: 39959868
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39959968
0
 
LVL 58

Expert Comment

by:Gary
ID: 39960072
@ 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
 
LVL 1

Author Comment

by:niceoneishere
ID: 39960121
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
 
LVL 1

Author Comment

by:niceoneishere
ID: 39960443
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
 
LVL 58

Expert Comment

by:Gary
ID: 39960454
Which solution are you using?
0
 
LVL 1

Author Comment

by:niceoneishere
ID: 39960471
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
 
LVL 58

Accepted Solution

by:
Gary earned 300 total points
ID: 39960490
<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
 
LVL 1

Author Comment

by:niceoneishere
ID: 39960603
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
 
LVL 58

Expert Comment

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

Open in new window

0
 
LVL 1

Author Closing Comment

by:niceoneishere
ID: 39967241
Thanks Guys :)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question