asked on

Populate two (or more) dependent dropdowns simultaneously

First time posting. I have a dropdown with select options listed A through Z...

<select style="width:375px; text-align: left" id="alpha" onchange="fetch_select(this.value);">
<option value="" disabled selected>First Letter</option>
<option value="#">"0-9"</option>
<option value="A">"A"</option>
<option value="B">"B"</option>

<select id="operator" name='operator'>
			<option value="0">- Select Operator -</option>
		</select>
<select id="wnames">
	   <option value="0">- Select Well Name -</option>
	</select>

Open in new window

I also have two dependent dropdowns that will return their values after the selection of the letter. Onchange of "apha", I need the value to pass to php via ajax, execute two sql queries simultaneously (not cascading), and return the data in json in the two dropdowns, "operator" and "wnames". I don't know how to execute the two sql statements with the one ajax variable and return the two sets of rows.
Here is my ajax:

//Ajax to fetch operators once alpha chosen
		 function fetch_select(val){
        //var alpha = $(this).val();

        $.ajax({
			type: 'post',
            url: 'alphaScript53.php',
			dataType: 'json',
            data: {op_option:val},
            success:function(response){

                var op_len = response.length;

                $("#operator").empty();
                for( var i = 0; i<op_len; i++){
                    //var id = response[i]['Rig_ID'];
                    var op_name = response[i]['Operator'];
                    
                    $("#operator").append("<option value='"+op_name+"'>"+op_name+"</option>");
					//console.log(response);
                }
            }
        });
			 }
		//Ajax to fetch well names once alpha chosen
		function fetch_select(val){
        //var alpha = $(this).val();

        $.ajax({
			type: 'post',
            url: 'alphaScript53.php',
			dataType: 'json',
            data: {well_option:val},
            success:function(response){

                var well_len = response.length;

                $("#wnames").empty();
                for( var i = 0; i<well_len; i++){
                    //var id = response[i]['Rig_ID'];
                    var well_name = response[i]['wellname'];
                    
                    $("#wnames").append("<option value='"+well_name+"'>"+well_name+"</option>");
					//console.log(response);
                }
            }
        });
			 }

Open in new window

And the php:

include 'config.php';		

//query wellname and send back to webpage	
$well_alpha = $_POST['well_option'];   // department id

$well_sql = "SELECT wellname, Operator FROM nd_rigs WHERE wellname LIKE '".$well_alpha."%' ORDER BY wellname";

$well_result = mysqli_query($conn,$well_sql);

$well_users_arr = array();

while( $well_row = mysqli_fetch_array($well_result) ){
    //$rigid = $row['Rig_ID'];
    $wellname = $well_row['wellname'];

    $well_users_arr[] = array("wellname" => $wellname);
}

// encoding array to json format
echo json_encode($well_users_arr);

//query Operators and send back to webpage		
        $op_alpha = $_POST['op_option'];   // department id

$op_sql = "SELECT Operator FROM nd_rigs WHERE Operator LIKE '".$op_alpha."%' GROUP BY Operator ORDER BY Operator";

$op_result = mysqli_query($conn,$op_sql);

$op_users_arr = array();

while( $op_row = mysqli_fetch_array($op_result) ){
    //$rigid = $row['Rig_ID'];
    $operator = $op_row['Operator'];

    $op_users_arr[] = array("Operator" => $operator);
}

// encoding array to json format
echo json_encode($op_users_arr);

Open in new window

Julian Hansen

Hi Jesse,

Welcome to EE - hopefully we can assist you with your question.

We have some Previously Asked Questions (PAQ) that address this issue.

Here is one

https://www.experts-exchange.com/questions/28980758/selecting-a-category-and-selecting-subcategories.html

The sample for the above is located here

The above sample has two modes of operation
1. In page where options are sourced from local data
2. Where the page queries the server to get options for subsequent dropdowns

There are three linked dropdowns in the example - full source code is available on the link above.

Jesse Pierce

ASKER

Julian,

Thanks for the reply and helpful link. I realize that I could've added more detail.

In the web page, a user will select a letter to sort both the "operator" field, and the "wnames" field. The user may wish to look at all operators that begin with "A", and they may also wish to look at all wnames that begin with "A". So I would like to have the ajax send the "alpha" letter, lets say "A", and SELECT all operators from the table that begin with "A", as well as all wnames that begin with "A", at the same time. Then the results will need to go into their respective dropdowns. I do not need cascading dropdowns, but rather two that are simultaneously dependent on one.

Julian Hansen

The principle remains the same - how you interact with the request will need to change but the actual mechanics are pretty much identical.

I can't do a sample right now (for your specific case) but if you take the code from my current sample and try to adapt it and post back here I will take a look at it tomorrow.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jesse Pierce

ASKER

Thank you both for the help. I applied the code from leakim971 and that's exactly what I needed. I think I was very close in a previous try. Julian, your example was very insightful, as well as the examples associated on that examples page.