CODEWITHSUNDEEP
phphtml
NoobDEV-GBL
NoobDEV-GBL

Reputation: 352

change select box value using other select box

I am working on an administrative form where I have to select the client first and then select the building.

I have in the database a table with clients and another with the buildings of the clients correctly associated.

The problem is that I I wanted to do a select with the clients and a select with the buildings but instead of showing all the buildings, only showing the ones of the selected client.

I was able to do the code below after a lot of research, but I could not get it to fetch the values to bd to the salect of the building.

This form is for managers to assign tasks to technicians, where technicians will have to do pre-contracted services.

<!DOCTYPE html>
<html>
<head>

<script>
function populate(s1,s2){
	var s1 = document.getElementById(s1);
	var s2 = document.getElementById(s2);
	s2.innerHTML = "";
	if(s1.value == "Chevy"){
		var optionArray = ["|","camaro|Camaro","corvette|Corvette","impala|Impala"];
	} else if(s1.value == "Dodge"){
		var optionArray = ["|","avenger|Avenger","challenger|Challenger","charger|Charger"];
	} else if(s1.value == "Ford"){
		var optionArray = ["|","mustang|Mustang","shelby|Shelby"];
	}
	for(var option in optionArray){
		var pair = optionArray[option].split("|");
		var newOption = document.createElement("option");
		newOption.value = pair[0];
		newOption.innerHTML = pair[1];
		s2.options.add(newOption);
	}
}
</script>
</head>
<body>
<h2>Choose Your Car</h2>
<hr />
Choose Car Make:
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>
<hr />
</body>
</html>

as a final result would have to be for example if I select the client AAA must appear in buildings only the buildings associated with the customer AAA:

AAA-buildings1

AAA-buildings2

AAA-buildings3

...

Upvotes: 2

Views: 96

Answers (1)

cssyphus
cssyphus

Reputation: 40106

If I understand the question, you wish to (a) trap the user's SELECT choice of client, and then use that information to get the appropriate info from the database in order to populate the second SELECT.

This is exactly the type of scenario for which AJAX was created. It's actually pretty simple (more simple with jQuery than with pure js, but isn't everything...). Here are some examples on how it works:

dropdown options is dependent from another dropdown options (all value from database)

A basic video tutorial re ajax (pure javascript)

Code Examples:

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="slct1" name="slct1">
  <option value=""></option>
  <option value="Chevy">Chevy</option>
  <option value="Dodge">Dodge</option>
  <option value="Ford">Ford</option>
</select>
<hr />
Choose Car Model:
<select id="slct2" name="slct2"></select>

JS/JQuery:

$('#slct1').change(function(){
    let s1 = this.value;
    $.ajax({
        type: 'post',
         url: 'myajax.php',
        data: 's1=' + s1
    }).done(function(d){
        $('#slct2').html(d); //"d" can be any varname you want (here AND line above)
    });
});

PHP file: (myajax.php)

<?php
    $sel1 = $_POST['s1'];

    if ($sel1 == 'Chevy'){
        $out = '<option value="Cobalt">Cobalt</option>';
        $out += '<option value="Camaro">Camaro</option>';
        $out += '<option value="Malibu">Malibu</option>';
        $out += '<option value="Silverado">Silverado</option>';
    }elseif ($sel1 == 'Ford'){
        $out = '<option value="Model A">Model A</option>';
        $out += '<option value="F150">F150</option>';
        $out += '<option value="Mustang">Mustang</option>';
        $out += '<option value="Mondeo">Mondeo</option>';
    }

    echo $out;

Example 2:

Untested and off-the-cuff, but you get the idea

<?php
    include 'connect.php'; //connects to MySQL and creates $conn

    $sel1 = $_POST['s1'];

    $query = "SELECT * FROM `cars` WHERE `brand`='" .$sel1. "' ";
    $aR = mysqli_query($conn, $query);

    $out = '';
    while ($r = mysql_fetch_assoc($aR)){
        $out .= '<option value="' .$r['model']. '">' .$r['model']. '</option>';
    }
    echo $out;

Upvotes: 2

Related Questions