Solved

Country - State Select - JQuery Drop Down Menu

Posted on 2013-01-13
27
912 Views
Last Modified: 2013-01-18
Hello to all JQuery experts.
OK, found this code, of which is really simple, however I cannot get it to work on its own.
http://jsfiddle.net/FK7ga/

Can someone please paste an actual working example of this code?

Thanks
Carrzkiss
0
Comment
Question by:Wayne Barron
  • 14
  • 13
27 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38772308
your code work fine on Chrome and Firefox

code updated : http://jsfiddle.net/FK7ga/12/

var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
var trash = $("#C_State_Prov optgroup").remove();

$('#C_Country').change(function(){
  trash.appendTo("#C_State_Prov"); 
  trash = $("#C_State_Prov optgroup").not("optgroup[label='"+$(this).find(':selected').html() + "']").remove();
}); 

Open in new window

0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38772697
Hey leak.
Yes, the code works, on that site, however, I cannot make it work, outside of that site, on my own site.

So. What else is needed to make it work?
Besides just the JS code that you posted, and the HTML, what else is needed to make this work?
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38772779
this is the code, as it sits, and it does not function like it does on the site.

<script type="text/javascript">
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
var trash = $("#C_State_Prov optgroup").remove();

$('#C_Country').change(fun<wbr ></wbr>ction(){
  trash.appendTo("#C_State_P<wbr ></wbr>rov"); 
  trash = $("#C_State_Prov optgroup").not("optgroup[l<wbr ></wbr>abel='"+$(<wbr ></wbr>this).find<wbr ></wbr>(':selecte<wbr ></wbr>d').html()<wbr ></wbr> + "']").remove();
}); 
</script>

<form>
<select id="C_Country" name="C_Country" aria-required="true" class="required Fields"  tabindex="13">
    <option value=" " selected="">-- Please Select --</option>
    <option value="USA">United States</option>
    <option value="CA">Canada</option><wbr ></wbr>
</select>


<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required Fields" tabindex="14">
<option value="Choose">Choose Your State</option>
<optgroup label="United States">
<option value="AL">ALABAMA</option<wbr ></wbr>>
<option value="AK">ALASKA</option><wbr ></wbr>
<option value="AZ">ARIZONA</option<wbr ></wbr>>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option<wbr ></wbr>>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</optio<wbr ></wbr>n>
</optgroup>
</select>
</form>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38772895
wait for the DOM to be ready.
<script type="text/javascript">
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
var trash = $("#C_State_Prov optgroup").remove();

$(document).ready(function() {

$('#C_Country').change(function(){
  trash.appendTo("#C_State_Prov"); 
  trash = $("#C_State_Prov optgroup").not("optgroup[label='"+$(this).find(':selected').html() + "']").remove();
}); 

})

</script>

Open in new window

0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773092
OK.
This is the page running
http://ee.cffcs.com/Q_27993786/Q_27993786.asp

Now, the state drop, already has the names of both countries already in it.
There for, as it sits, the code from the site, is missing what makes it work.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 38773099
try this :
<script type="text/javascript">
var state_province = null
var trash = null;

$(document).ready(function() {
state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
trash = $("#C_State_Prov optgroup").remove();
$('#C_Country').change(function(){
  trash.appendTo("#C_State_Prov"); 
  trash = $("#C_State_Prov optgroup").not("optgroup[label='"+$(this).find(':selected').html() + "']").remove();
}); 

})

</script>

Open in new window

0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773130
nope, still not go.
Still load all states for all countries when page loads.

How did the site do it? How is it working on that site?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773132
you did not updated your page, I'm still seing the previous code here :
http://ee.cffcs.com/Q_27993786/Q_27993786.asp
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773136
Go on the site.
Google Chrome - View "Frame" source.
And you get the code.

I strongly suggest to whomever does these codes, they should provide everything for the person, or tell them to view the source of the page, or in this case, the [Frame]

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
state_province.hide(); 


 $('#C_Country').change(function(){
     state_province.hide(); 
     $("#C_State_Prov optgroup[label='"+$(this).find(':selected').html() + "']" )
     .children()
     .andSelf()
     .show();  
 }); 
});//]]>  

</script>


</head>
<body>
  <select id="C_Country" name="C_Country" aria-required="true" class="required">
    <option value=" " selected="">-- Please Select --</option>
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="USA">United States</option>
    <option value="DZ">Algeria</option>
    <option value="CA">Canada</option>
    <option value="AD">Andorra</option>
</select>


<p><label for="C_State_Prov">State or Province <span title="required">*</span></label></p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
    <option value="" selected="">-- Please Select --</option>
    <optgroup label="United States">
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="AZ">Arizona</option>
    <option value="CA">California</option>
    </optgroup>
    <optgroup label="Canada">
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    </optgroup>
</select>
  
</body>


</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773140
nope, I refresh my page multiple time, check attachment
jQuery plugin is not on the page currently
Clipboard02.jpg
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773149
I did not update that page.
The code that I just provided is working.

However, I will update the page to demonstrate, for those that do not want to test it themselves.

http://ee.cffcs.com/Q_27993786/Q_27993786.asp

Going to close this one out, as solution.
Carrzkiss
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773157
I've requested that this question be closed as follows:

Accepted answer: 0 points for carrzkiss's comment #a38773136

for the following reason:

Had to go onto the site, and view the source of the "Frame"
In order to get the code that actually runs the script.
Of which the person that did this, should post to view the source to get the working code.

Anyway.
This is done.

Carrzkiss
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773152
this is better now...
I see you start modifyng the code...
$(window).load(function(){
is not required here,
$(document).ready(function(){
should be adequate, you have no image for example in your page...
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Expert Comment

by:leakim971
ID: 38773153
I think you miss you're using the code I provided... you don't want to award me the points?
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773155
>>you have no image for example in your page
What are you referring too?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773158
yes, I'm the author of the code...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773163
What are you referring too?
$(window).load(function(){
is not required here,
$(document).ready(function(){

the screen copy ID: 38773140 was the source of your site
I can't do a copy/paste of ID: 38773099 for you to your site
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773165
It does not matter which one was used.
It did not work, and you did not know how it worked either.
I had to view the source of the page, in order to get this line

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

Which is what makes it work.
That is what I was hunting for.
I can use the other code, and it will still give the same results, you would still need that one single line of code, and without that, it would not work nor function as suspected.

That is what I was hunting for, and it would be bad to award you points, for something that did not work on my own site, even though it worked on the site, does not mean that it is going to work on someone else's, unless you have all the code.

Have a good one leak, and no harsh feeling.
I just cannot award points, for something that I could not get to work from the code provided.

Carrzkiss
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773173
I think you did not understood
You make a bad copy of the MY solution to your site
How can I help you make a copy?

I sent a screen copy ID: 38773140 to let you know YOU did a bad copy or refresh (or I don't how you make it)

The code you're running is the code I provided to you, how can you say you don't award me the points just because you make a new copy with success after viewing source of the jsfiddle?

Have a good one leak, and no harsh feeling.
there's things most important in live... I'm always happy!
0
 
LVL 30

Accepted Solution

by:
Wayne Barron earned 0 total points
ID: 38773272
They both do the same exact thing
This is with your js code.
http://ee.cffcs.com/Q_27993786/Q_27993786.asp

This is with the original js code.
http://ee.cffcs.com/Q_27993786/Q_27993786_1.asp

Now, let me say this one more time.
#1:
My question was HOW to make the code work on a site outside of the original source site.
You posted your JS code, which DID NOT solve the issue.

Now, I posted code here:  http:38773136
Which showed the working code, of which contains the line that you DID NOT provide to make it work, which is:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

Now.
You wanting points for this fine, I will give you the points.
However, it is redundant to do so, considering that you NEVER provided a working code.
You only provided a code that did the same thing, as it demonstrated in the 2 links above.

And the screenshot that you took, was for the original code that I posted.
And you could clearly see, that it had not been updated with the code that I posted in the link above http:38773136
Of which, I am assuming that you thought that I was saying to view the source on my page, when it was the original source page, that I was referring too.

You can use either code, and they produce the same effect, as long as you have the
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

sorry for upsetting you, however, the facts are here.
You did not produce a working solution, regardless of which JS code was used, in the solution, I can go back and post the original which is here.
And this work!
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    
  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup'); 
state_province.hide(); 


 $('#C_Country').change(function(){
     state_province.hide(); 
     $("#C_State_Prov optgroup[label='"+$(this).find(':selected').html() + "']" )
     .children()
     .andSelf()
     .show();  
 }); 
});//]]>  

</script>


</head>
<body>
  <select id="C_Country" name="C_Country" aria-required="true" class="required">
    <option value=" " selected="">-- Please Select --</option>
    <option value="AF">Afghanistan</option>
    <option value="AX">Aland Islands</option>
    <option value="USA">United States</option>
    <option value="DZ">Algeria</option>
    <option value="CA">Canada</option>
    <option value="AD">Andorra</option>
</select>


<p><label for="C_State_Prov">State or Province <span title="required">*</span></label></p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
    <option value="" selected="">-- Please Select --</option>
    <optgroup label="United States">
    <option value="AK">Alaska</option>
    <option value="AL">Alabama</option>
    <option value="AR">Arkansas</option>
    <option value="AZ">Arizona</option>
    <option value="CA">California</option>
    </optgroup>
    <optgroup label="Canada">
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    </optgroup>
</select>
  
</body>


</html>

Open in new window

0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773284
You are awarded the points.
This is closed.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773289
Your question is about this code : http://jsfiddle.net/FK7ga/
I open the link with Chrome and it work perfectly
If you check the source of this jsfiddle, you can see line 19 : $(window).load(function(){
It ask the browser to waiting total loading of the page including full loading of eventual images

So, I was thinking you have a cache problem BUT I test this same code on IE and it doesn't work, so I was thinking you tested on IE and found it don't work. The issue is : the code work on Chrome, Firefox, Safari and Opera BUT not on IE

I decide to create a new code : ID: 38772308

You answer me it don't work on your side, so I understood you did not add :
$(document).ready(function() {}
but I made a mistake initializing the two globals variable outside of this bloc, I sent you a correction ID: 38773099 and I notice you make some mistake copying the code ID: 38773099 (see the screen copy)

You found your own way to copy/paste the FULL page of your code and say YOUR INITIAL CODE WORK NOW.

No, your code still don't work on IE
My code work on IE, I mean the last one : ID: 38773099

I don't know what is your level in jQuery, so I was thinking you know where to put the code provided on ID: 38772308

I apologize for the time, I don't really need your points if you feel I did not provide a correct solution

Please note, one more time, that your code DON'T WORK ON IE and I was thinking this is your main issue.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773291
It's a bit late here, see you later, have a nice week, don't worry about all of this, once again there's things more important, hope you know that.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773301
Just tested
Chrome (Version 23.0.1271.97 m)
IE 8
IE 9
FF 18.0

Yes, you are right, it is working in your code.
it would have been really cool if you would have stated this earlier.
So, your code resolves the browser issue, and it is good to go.

So, you DESERVE the points, and this would have been completed and awarded a LONG time ago, if you would have just told me about the browser issue.

Have a good one Leak.
0
 
LVL 30

Author Comment

by:Wayne Barron
ID: 38773310
I corrected my last post.
have a good one Leak.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38773943
it would have been really cool if you would have stated this earlier.
This is my first words, on my first post : your code work fine on Chrome and Firefox
but would be clearest to write :
your code work fine on Chrome and Firefox but not on IE

for the second... for the first issue, once you posted your full site code, I put ID: 38772895 :
wait for DOM to be ready
This is what $(document).ready(function() { do

And I add ID: 38773152
there's a difference between
$(window).load(function() {
and
$(document).ready(function() {

more info here for example : http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/

Have fun and good week
0
 
LVL 30

Author Closing Comment

by:Wayne Barron
ID: 38792334
The ending comment from me, is what solved this issue.
For anyone that wants to use this code, copy the code from the code area, or view either link to the ee.cffcs.com links.

What solved this issue was the use of the following JS
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

This is closed.
Carrzkiss
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now