Link to home
Start Free TrialLog in
Avatar of Wayne Barron
Wayne BarronFlag for United States of America

asked on

Country - State Select - JQuery Drop Down Menu

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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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

Avatar of Wayne Barron

ASKER

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?
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

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

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.
SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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?
you did not updated your page, I'm still seing the previous code here :
http://ee.cffcs.com/Q_27993786/Q_27993786.asp
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

nope, I refresh my page multiple time, check attachment
jQuery plugin is not on the page currently
Clipboard02.jpg
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
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
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...
I think you miss you're using the code I provided... you don't want to award me the points?
>>you have no image for example in your page
What are you referring too?
yes, I'm the author of the code...
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
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
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!
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You are awarded the points.
This is closed.
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.
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.
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.
I corrected my last post.
have a good one Leak.
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
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