Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,194,101 members, 7,953,351 topics. Date: Thursday, 19 September 2024 at 02:54 PM

I Need Help For This Chained Select Jquery! - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / I Need Help For This Chained Select Jquery! (2052 Views)

Nairalanders Pls I Need Your Help For Reviewing Of My New Blog / I Urgently Need HELP for my Website......... / HELP For Uploading Pictures On My Blog.. (2) (3) (4)

(1) (Reply) (Go Down)

I Need Help For This Chained Select Jquery! by Emusan(m): 9:40pm On Jul 09, 2015
Please I need someone to help me with a sample code for this chained select;

For instance, I want all the 36 states in Nigeria in one box and immediately the user chooses any state ALL the local area will be ready to be selected in the other box.

I do a little search but I couldn't get what I want, the only one I got which is somehow closed to it didn't work.

See it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>


$("#series" ).chained("#mark" ); /* or $("#series" ).chainedTo("#mark" ); */

Please can someone shield more light on it for me?
Re: I Need Help For This Chained Select Jquery! by Justjyde(m): 10:53pm On Jul 09, 2015
Do it like this. It should work. full working copy also attached. just extract into a folder and use a web server (WAMP or IIS). Have fun.



<html>
	<head>
		<script src="jquery-1.11.3.min.js"></script>
		<script src="jquery.chained.min.js"></script>
		
	</head>
	<body>
		<select id="mark" name="mark">
			<option value="">--</option>
			<option value="bmw">BMW</option>
			<option value="audi">Audi</option>
		</select>
		<select id="series" name="series">
			<option value="">--</option>
			<option value="series-3" class="bmw">3 series</option>
			<option value="series-5" class="bmw">5 series</option>
			<option value="series-6" class="bmw">6 series</option>
			<option value="a3" class="audi">A3</option>
			<option value="a4" class="audi">A4</option>
			<option value="a5" class="audi">A5</option>
		</select>
		
		<script type="text/javascript">
			$("#series" ).chained("#mark" ); /* or $("#series" ).chainedTo("#mark" ); */
		</script>
	</body>
</html>

Re: I Need Help For This Chained Select Jquery! by Emusan(m): 8:29am On Jul 10, 2015
Justjyde:
Do it like this. It should work. full working copy also attached. just extract into a folder and use a web server (WAMP or IIS). Have fun.



<html>
	<head>
		<script src="jquery-1.11.3.min.js"></script>
		<script src="jquery.chained.min.js"></script>
		
	</head>
	<body>
		<select id="mark" name="mark">
			<option value="">--</option>
			<option value="bmw">BMW</option>
			<option value="audi">Audi</option>
		</select>
		<select id="series" name="series">
			<option value="">--</option>
			<option value="series-3" class="bmw">3 series</option>
			<option value="series-5" class="bmw">5 series</option>
			<option value="series-6" class="bmw">6 series</option>
			<option value="a3" class="audi">A3</option>
			<option value="a4" class="audi">A4</option>
			<option value="a5" class="audi">A5</option>
		</select>
		
		<script type="text/javascript">
			$("#series" ).chained("#mark" ); /* or $("#series" ).chainedTo("#mark" ); */
		</script>
	</body>
</html>


Thanks for your respond! But it didn't work.

Let me put it this way this time around, I want to insert the code into a PHP file.

Please come to my level this time because I'm not a webdesign guru.
Re: I Need Help For This Chained Select Jquery! by Justjyde(m): 10:04am On Jul 10, 2015
Emusan:


Thanks for your respond! But it didn't work.

Let me put it this way this time around, I want to insert the code into a PHP file.

Please come to my level this time because I'm not a webdesign guru.

Then stop wasting everyone's time. Go and learn. You have html and javascript here. At least you should know that were there is no PHP, you cannot expect a PHP behaviour. Go and learn then you will become proficient. Who says you have to be a guru?
Re: I Need Help For This Chained Select Jquery! by Emusan(m): 10:42am On Jul 10, 2015
Justjyde:
Then stop wasting everyone's time. Go and learn. You have html and javascript here. At least you should know that were there is no PHP, you cannot expect a PHP behaviour. Go and learn then you will become proficient. Who says you have to be a guru?

Bro. don't be upset with me.

I have to explain myself better so that you can get my point.

I know those codes were html and Javascript that's why I have to come up with the second point to make it clearer.

Please can you just use that example to help me on how it will be if I was to write it in PHP?

Lastly, I'm actually on tutorial but I need this urgently.

Thanks for the help!
Re: I Need Help For This Chained Select Jquery! by DualCore1: 12:39pm On Jul 10, 2015
Create a database table called "states" with the following fields "id(auto increment, primary key)", "state (varchar 100)"
Create another db table called "lgas" with the following fields "id (auto increment)", "state (foreign key)", "lga"

Now prefill the "states" db table with all the 36 states, do not prefill the IDs as this will be autoincremented.
Then prefill the "lgas" table with all the LGAs for all the states, ensure you fill in the ID of the state from the "states" table as the "states" field in the "lgas" table.

Now you should have a complete database of all states and their LGAs.

To the code:
Combining php, html, jquery

create a form with a select input field.
-query database for all the states
-foreach entry, create a new <option> tag inside the <select> you created. the value of the <option> tag should be the ID of the state from the DB "states" table.
-add a listener to the select statement, probably an onchange or onclick listener (check the jQuery documentation for help).
-create a variable in javascript (e.g var state_idwink that holds the <select>'s value, which is the ID of the selected state.
-in your JS add a function to the listener and the function should call the ajax() and you should give a php file name as the load attribute of this ajax(). e.g "load_lga.php". Remember to affix the ID to the file you are about to load like "load_lga.php?id="+state_id

Now create the load_lga.php file
in this file you first GET the "id" variable that is coming in
$id = $_GET("id"wink;
That is the selected state.
Now create another <select> tag
Then run a query to select all from lgas where state = $id
Populate the <options> tag with the result.
Remember to echo the entire <select> tag and its <option> tags out so the jquery ajax() can pick it and display it where you want it to.


I'm sorry if this looks far from simple for you but its one of the right ways to get it done. I think you should learn the basics to get this to work. Once you learn the basics, you'll see its actually a simple solution.

1 Like

Re: I Need Help For This Chained Select Jquery! by Emusan(m): 8:45pm On Jul 11, 2015
DualCore1:
Create a database table called "states" with the following fields "id(auto increment, primary key)", "state (varchar 100)"
Create another db table called "lgas" with the following fields "id (auto increment)", "state (foreign key)", "lga"

Now prefill the "states" db table with all the 36 states, do not prefill the IDs as this will be autoincremented.
Then prefill the "lgas" table with all the LGAs for all the states, ensure you fill in the ID of the state from the "states" table as the "states" field in the "lgas" table.

Now you should have a complete database of all states and their LGAs.

To the code:
Combining php, html, jquery

create a form with a select input field.
-query database for all the states
-foreach entry, create a new <option> tag inside the <select> you created. the value of the <option> tag should be the ID of the state from the DB "states" table.
-add a listener to the select statement, probably an onchange or onclick listener (check the jQuery documentation for help).
-create a variable in javascript (e.g var state_idwink that holds the <select>'s value, which is the ID of the selected state.
-in your JS add a function to the listener and the function should call the ajax() and you should give a php file name as the load attribute of this ajax(). e.g "load_lga.php". Remember to affix the ID to the file you are about to load like "load_lga.php?id="+state_id

Now create the load_lga.php file
in this file you first GET the "id" variable that is coming in
$id = $_GET("id"wink;
That is the selected state.
Now create another <select> tag
Then run a query to select all from lgas where state = $id
Populate the <options> tag with the result.
Remember to echo the entire <select> tag and its <option> tags out so the jquery ajax() can pick it and display it where you want it to.


I'm sorry if this looks far from simple for you but its one of the right ways to get it done. I think you should learn the basics to get this to work. Once you learn the basics, you'll see its actually a simple solution.

Thanks brother!

Actually like you said, it really far from simple for someone like me and also I'm not just sitting down I'm still learning just that there's a need for this now.

Though, as I was going through my THEME files I came across these codes I think it may have something to do with my problem now just maybe but I believe you can put me through.

These are the codes:

<label for="country">Country</label>

<select id="country" class="show-menu-arrow selectpicker" name="coun">

<option value="">-</option>

<?php

$args=array(

'post_type' => 'Property',

'posts_per_page' => -1,

);

$i = 0;

$locations = array();

$wp_query=new WP_Query($args);

while($wp_query->have_posts()):$wp_query->the_post();

?>

<?php

$value = get_post_meta(get_the_ID(),'_cmb_pro_country', true);

if (!in_array($value, $locations) && $value != '') {

$locations[$i] = $value;

?>

<option value="<?php echo get_post_meta(get_the_ID(),'_cmb_pro_country', true);?>"><?php echo get_post_meta(get_the_ID(),'_cmb_pro_country', true);?></option>

<?php } ?>

<?php $i++; ?>

<?php endwhile;?>

</select>

<label for="location">Location</label>

<select id="location" class="show-menu-arrow selectpicker" name="location">

<option value="">-</option>

<?php

$args=array(

'post_type' => 'Property',

'posts_per_page' => -1,

);

$i = 0;

$locations = array();

$wp_query=new WP_Query($args);

while($wp_query->have_posts()):$wp_query->the_post();

?>

<?php

$value = get_post_meta(get_the_ID(),'_cmb_pro_location', true);

if (!in_array($value, $locations) && $value != '') {

$locations[$i] = $value;

?>

<option value="<?php echo get_post_meta(get_the_ID(),'_cmb_pro_location', true);?>"><?php echo get_post_meta(get_the_ID(),'_cmb_pro_location', true);?></option>

<?php }

$i++;

endwhile;?>

</select>

Please does it relate with what you're trying to tell me to do?

If the answer is YES! Please under the OPTION TAG what do I need to fill at the VALUE space for both COUNTRY and LOCATION?

If the answer is NO! Please how can I go further from here to achieve what I want?

Thanks once again.
Re: I Need Help For This Chained Select Jquery! by thewebcraft(m): 1:17pm On Jul 12, 2015
Emusan:
Please I need someone to help me with a sample code for this chained select;

For instance, I want all the 36 states in Nigeria in one box and immediately the user chooses any state ALL the local area will be ready to be selected in the other box.

I do a little search but I couldn't get what I want, the only one I got which is somehow closed to it didn't work.

See it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.chained.min.js"></script>

<select id="mark" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="series-3" class="bmw">3 series</option>
<option value="series-5" class="bmw">5 series</option>
<option value="series-6" class="bmw">6 series</option>
<option value="a3" class="audi">A3</option>
<option value="a4" class="audi">A4</option>
<option value="a5" class="audi">A5</option>
</select>


$("#series" ).chained("#mark" ); /* or $("#series" ).chainedTo("#mark" ); */

Please can someone shield more light on it for me?
Hello I hope you don't mind send me ur email and I'll forward a real working example, eg u select a state and you see the local government area's in that state in another select box
Re: I Need Help For This Chained Select Jquery! by Emusan(m): 8:47am On Jul 13, 2015
thewebcraft:

Hello I hope you don't mind send me ur email and I'll forward a real working example, eg u select a state and you see the local government area's in that state in another select box

Please help me look at these below codes whether the THE LOCATION depend on THE COUNTRY

I mean if there are lists of Countries under COUNTRY box and one selects any Country will the LOCATION auto fill with ALL STATES under LOCATION box?

Thanks!

<label for="country">Country</label>

<select id="country" class="show-menu-arrow selectpicker" name="coun">

<option value="">-</option>

<?php

$args=array(

'post_type' => 'Property',

'posts_per_page' => -1,

);

$i = 0;

$locations = array();

$wp_query=new WP_Query($args);

while($wp_query->have_posts()):$wp_query->the_post();

?>

<?php

$value = get_post_meta(get_the_ID(),'_cmb_pro_country', true);

if (!in_array($value, $locations) && $value != '') {

$locations[$i] = $value;

?>

<option value="<?php echo get_post_meta(get_the_ID(),'_cmb_pro_country', true);?>"><?php echo get_post_meta(get_the_ID(),'_cmb_pro_country', true);?></option>

<?php } ?>

<?php $i++; ?>

<?php endwhile;?>

</select>

<label for="location">Location</label>

<select id="location" class="show-menu-arrow selectpicker" name="location">

<option value="">-</option>

<?php

$args=array(

'post_type' => 'Property',

'posts_per_page' => -1,

);

$i = 0;

$locations = array();

$wp_query=new WP_Query($args);

while($wp_query->have_posts()):$wp_query->the_post();

?>

<?php

$value = get_post_meta(get_the_ID(),'_cmb_pro_location', true);

if (!in_array($value, $locations) && $value != '') {

$locations[$i] = $value;

?>

<option value="<?php echo get_post_meta(get_the_ID(),'_cmb_pro_location', true);?>"><?php echo get_post_meta(get_the_ID(),'_cmb_pro_location', true);?></option>

<?php }

$i++;

endwhile;?>

</select>

(1) (Reply)

Content Blogpost And Email Writer Needed / What Is The Easiest Way To Learn Dreamweaver / Instagram Ads Fees/charges

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 66
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.