• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 992
  • Last Modified:

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
0
Wayne Barron
Asked:
Wayne Barron
  • 14
  • 13
2 Solutions
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
Wayne BarronAuthor Commented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
leakim971PluritechnicianCommented:
you did not updated your page, I'm still seing the previous code here :
http://ee.cffcs.com/Q_27993786/Q_27993786.asp
0
 
Wayne BarronAuthor Commented:
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
 
leakim971PluritechnicianCommented:
nope, I refresh my page multiple time, check attachment
jQuery plugin is not on the page currently
Clipboard02.jpg
0
 
Wayne BarronAuthor Commented:
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
 
Wayne BarronAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
I think you miss you're using the code I provided... you don't want to award me the points?
0
 
Wayne BarronAuthor Commented:
>>you have no image for example in your page
What are you referring too?
0
 
leakim971PluritechnicianCommented:
yes, I'm the author of the code...
0
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
Wayne BarronAuthor Commented:
You are awarded the points.
This is closed.
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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
 
Wayne BarronAuthor Commented:
I corrected my last post.
have a good one Leak.
0
 
leakim971PluritechnicianCommented:
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
 
Wayne BarronAuthor Commented:
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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 14
  • 13
Tackle projects and never again get stuck behind a technical roadblock.
Join Now