PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
R

2e dropdown vullen op basis van de 1e dropdown

Door Roy B op 23-07-2020 00:18 gewijzigd op 23-07-2020 00:20
4.253 views
Hallo,

Ik moet voor een website een dropdown vullen op basis van de geselecteerde waarde van de eerste dropdown op basis van PHP en MySQL. Nu heb ik in het verleden wel eens met deze talen gewerkt, maar kom er achter dat er de laatste tijd veel is veranderd.... :/

Nu heb ik al wat gevonden en getest. Het werkt en is een mooi beginpunt.

Het probleem waar ik nu tegen aanloop is het volgende:

Hoe kan ik aan 'huidig_id' meerdere waardes toekennen in de tabel 'isolatie_renovatie'?

Bij de eerste dropdown moet er bij de keus "geen isolatie", alle opties in de tweede dropdown worden weergegeven. Bij de andere keuzes moet exact dezelfde keuze in de tweede komen te staan.

Dus:
1e dropdown Geen isolatie -> alle 4 opties in 2e dropdown (Geen isolatie, Goede isolatie, Betere isolatie, Beste isolatie)
1e dropdown Goede isolatie -> 1 optie in 2e dropdown (Goede isolatie)
1e dropdown Betere isolatie -> 1 optie in 2e dropdown (Betere isolatie)
1e dropdown Beste isolatie -> 1 optie in 2e dropdown (Beste isolatie)

Bedankt voor het meedenken!


Dit heb ik zover:


CREATE TABLE `isolatie_huidig` (
  `huidig_id` int(11) NOT NULL,
  `huidig_status` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `isolatie_huidig` (`huidig_id`, `huidig_status`) VALUES
(1, 'Geen isolatie'),
(2, 'Goede isolatie'),
(3, 'Betere isolatie'),
(4, 'Beste isolatie');

CREATE TABLE `isolatie_renovatie` (
  `renovatie_id` int(11) NOT NULL,
  `renovatie_status` varchar(50) NOT NULL,
  `huidig_id` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `isolatie_renovatie` (`renovatie_id`, `renovatie_status`, `huidig_id`) VALUES
(1, 'Geen isolatie', '1'),
(2, 'Goede isolatie', '1'),
(3, 'Betere isolatie', '2'),
(4, 'Beste isolatie', '3');



index.php

<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Isolatie :</label><select name="isolatie_huidig" class="isolatie_huidig">
<option value="0">Selecteer isolatie</option>
<?php
include('db.php');
$sql = mysqli_query($con,"select * from isolatie_huidig");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['huidig_id'].'">'.$row['huidig_status'].'</option>';
} ?>
</select><br/><br/>
<label>City :</label><select name="isolatie_renovatie" class="isolatie_renovatie">
<option>Select City</option>
</select>
<br /><br />
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".isolatie_huidig").change(function()
{
var huidig_id=$(this).val();
var post_id = 'id='+ huidig_id;

$.ajax
({
type: "POST",
url: "ajax.php",
data: post_id,
cache: false,
success: function(cities)
{
$(".isolatie_renovatie").html(cities);
} 
});

});
});
</script>
</body>
</html>


ajax.php

include('db.php');
if($_POST['id']){
	$id=$_POST['id'];
	if($id==0){
		echo "<option>Selecteer isolatie</option>";
		}else{
			$sql = mysqli_query($con,"SELECT * FROM `isolatie_renovatie` WHERE huidig_id='$id'");
			while($row = mysqli_fetch_array($sql)){
				echo '<option value="'.$row['renovatie_id'].'">'.$row['renovatie_status'].'</option>';
				}
			}
		}
?>
Ramon van Dongen
24-07-2020 14:56
Ah, dat is al een stap in de goede richting. Dus $_POST['id'] is niet bekend, vandaar ook dat deze in je query niet gebruikt kan worden in ajax.php

Probeer in je index.php dit:
var post_id = 'id='+ huidig_id;
eens aan te passen naar
var post_id = 'id: '+ huidig_id;


Wat gebeurt er dan?
R Roy B
24-07-2020 14:59
Dan blijft de melding hetzelfde op ajax.php
Ramon van Dongen
24-07-2020 15:07 gewijzigd op 24-07-2020 15:07
En met dit:

$(".isolatie_huidig").change(function(){
alert($(".isolatie_huidig").children("option:selected").val());
	$.ajax({
		type: "POST",
		url: "ajax.php",
		data: { "id": $(".isolatie_huidig").children("option:selected").val()},
		cache: false,
		success: function(cities){
			$(".isolatie_renovatie").html(cities);
		}
	});
});


Niet getest hoor dus misschien dat het niet klopt, maar zoiets zou ik eens proberen. Met de alert even testen of er überhaupt wel iets door komt aan id.
R Roy B
24-07-2020 15:18 gewijzigd op 24-07-2020 15:20
Heb het nu even weer terug naar het begin gedaan en wat aangepast en het lijkt nu te werken.

index

<html>
	<head>
		<title>Test</title>
	</head>
	<body>
		<div>
			<label>Isolatie huidig :</label>
			<select name="isolatie" class="isolatie">
				<option value="0">Selecteer isolatie</option>
			
				<?php
					include('db.php');
					$sql = mysqli_query($con,"select * from isolatie");
					while($row=mysqli_fetch_array($sql))
					{
						echo '<option value="'.$row['id'].'">'.$row['status'].'</option>';
					} 
				?>
			</select>
            <br/><br/>
			<label>Isolatie na renovatie</label>
            <select name="isolatie_renovatie" class="isolatie_renovatie">
				<option>Selecteer isolatie</option>
			</select>
		</div>

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				$(".isolatie").change(function()
				{
					var id=$(this).val();
					var post_id = 'id='+ id;
					$.ajax
					({
						type: "POST",
						url: "ajax1.php",
						data: post_id,
						cache: false,
						success: function(isolatie)
						{
							$(".isolatie_renovatie").html(isolatie);
						} 
					});

				});
			});
		</script>
	</body>
</html>


ajax

<?php
include('db.php');
if($_POST['id']){
    $id=$_POST['id'];
    if($id==0){
        echo "<option>Selecteer isolatie</option>";
        }else{
            $sql = mysqli_query($con,"SELECT * FROM `isolatie` WHERE 
            (SELECT `alle_opties` FROM `isolatie` WHERE `id` = $id) = 1 or `id`= $id");

            while($row = mysqli_fetch_array($sql)){
                echo '<option value="'.$row['id'].'">'.$row['status'].'</option>';
                }
            }
        }
?>


[size=xsmall]Toevoeging op 24/07/2020 16:14:31:[/size]

Ramon van Dongen op 24/07/2020 14:43:36

Ik vind het zelf altijd handiger om met ajax de gehele 2de selectbox te creëeren (in jouw geval dus in je ajax.php bestand), dus inclusief de <select> en </select> en niet alleen de <option>'s


Heb ik mee zitten proberen, maar is me niet gelukt om het goed werkend te krijgen.

R Roy B
30-07-2020 01:01 gewijzigd op 30-07-2020 01:14
Loop nog tegen een ander probleempje aan waar ik niet uit kom. Zal vast wel niet ingewikkeld zijn maar ik krijg het niet voor elkaar.

De dropdowns werken zoals het hoort. Nu heb ik aan de tabel nog een waarde toegevoegd, de indexwaarde. Elke isolatiestatus heeft een indexwaarde. Deze indexwaarde wil ik gebruiken om de isolatie waarde te berekenen.

Stel dat de isolatie waarde 3,0 is bij geen isolatie.
Geen isolatie heeft indexwaarde van 0,0 -> isolatiewaarde = 3,0 - 0,0
Goede isolatie heeft indexwaarde van 0,5 -> isolatiewaarde = 3,0 - 0,5
Betere isolatie heeft indexwaarde van 0,7 -> isolatiewaarde = 3,0 - 0,7
Beste isolatie heeft indexwaarde van 0,9 -> isolatiewaarde = 3,0 - 0,9

De (nieuwe) isolatiewaarde wil ik weergeven op de pagina.
Deze indexwaarde moet dan uit de 2e dropdown komen en daar loop ik op vast. De indexwaarde weergegeven in de dropdown is geen probleem, maar nu deze waarde nog uitlezen uit deze dropdown zodat ik deze kan gebruiken om de nieuwe isolatiewaarde te berekenen.

Iemand die me op weg kan helpen hiermee?

Alvast bedankt.
R Roy B
30-07-2020 11:23
Dank je voor je reactie!

Ik heb wat geprobeerd en heb het nu half aan het werk met onderstaande



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
	$(function(){
                     $("#singleSelectValueDDjQuery").on("change",function(){
                         //Getting Value
                         var selValue = $("#singleSelectValueDDjQuery").val();
                         //Setting Value
                         $("#textFieldValueJQ").val(selValue);
                     });   
                    
                });
	   
</script>





<label>Isolatie na renovatie</label>
 <select name="isolatie_renovatie" class="isolatie_renovatie" id="singleSelectValueDDjQuery">
   <option>Selecteer isolatie</option>
  </select>




<input type="text" id="textFieldValueJQ" class="form-control" placeholder="Waarde">


Als ik in de 1e dropdown "geen isolatie" kies dan krijg ik in de 2e dropdown 4 opties.
Standaard staat deze op "geen isolatie | 0,00". De waarde 0,00 komt niet standaard in het textveldje te staan. Verander ik het naar 1 van de 3 andere dan komt die waarde wel erin te staan. Verander ik het weer naar "geen isolatie | 0,00" dan komt er wel netjes 0,00 in het textveld te staan.

Kies ik in de 1e dropdown een andere waarde, dan veranderd de 2e dropdown netjes mee. De waarde ervan komt niet in het textveld.

Dus de standaardwaarde die in de 2e dropdown komt wordt niet gelezen. Pas als daar een verandering is dan wordt het in het textveld gezet.
R Roy B
01-08-2020 09:43
Niemand die me op weg kan helpen? :'(
A Adoptive Solution
01-08-2020 12:07
Ik weet niet wat het groter geheel is en of dit de oplossing is, maar op basis van de info heb ik dit bedacht.

De werking van de 2 menuus is bekend.

isolatie.php vult het eerste menu.

Aanvullend wordt isolatie_calc.php aangeroepen om iets uit te rekenen/op te halen.

Ik heb maar iets verzonnen.

Het resultaat wordt in id='resultaat' getoond.

<div>
	<label>Isolatie :</label>
	<select id="isolatie_huidig" name="isolatie_huidig" class="isolatie_huidig">
		<option value="10000">Selecteer isolatie</option>
		<?php
		include('connect.php');
		$result = $db->query("SELECT * FROM isolatie_huidig");
		while ( $row = $result->fetch_object() )
		{
			echo '<option value="' . $row->huidig_id . '">' . $row->huidig_status . '</option>' . PHP_EOL;
		}
		?>
	</select>
	<br /><br />
	<label>City :</label>
	<select id="isolatie_renovatie" name="isolatie_renovatie" class="isolatie_renovatie" >
		<option>Select City</option>
	</select>
	<br /><br />
	<p id="resultaat"></p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
$(document).ready(function()
{
	$("#isolatie_huidig").change(function()
	{
		var huidig_id = $(this).val();
		var post_id   = 'id='+ huidig_id;
		$.ajax ({
			type: "POST",
			url: "isolatie.php",
			data: post_id,
			cache: false,
			success: function(isolatie)
			{
				$("#isolatie_renovatie").html(isolatie);
				singleSelectChangeValue();
				getCalcValues( post_id );
			}
		});
	});
});

$("#isolatie_renovatie").change(function()
	{
	var huidig_id = $(this).val();
	var post_id   = 'id='+ huidig_id;
	getCalcValues( post_id );
});

function getCalcValues( theId )
{
	$.ajax ({
		type: "POST",
		url: "isolatie_calc.php",
		data: theId,
		cache: false,
		success: function(resultaat)
		{
			$("#resultaat").html(resultaat);
		}
	});
}

function singleSelectChangeValue()
{
	var selObj   = document.getElementById("isolatie_renovatie");
	var selValue = selObj.options[selObj.selectedIndex].value;
	var selText  = selObj.options[selObj.selectedIndex].text;
}

</script>


Dit is "isolatie.php".

<?php
include('connect.php');
if( $_POST['id'] )
{
	$id = $_POST['id'];
	$options = '';
	if ( $id <= 9999 )
	{
		if ( $id == 1 )
		{
			$query = 'SELECT * FROM isolatie_renovatie';
		} else {
			$query = 'SELECT * FROM isolatie_renovatie WHERE huidig_id = "' . $id . '"';
		}
		$result = $db->query( $query );
		while( $row = $result->fetch_object() )
		{
			$options .= '<option value="' . $row->renovatie_id . '">' . $row->renovatie_status . '</option>' . PHP_EOL;
		}
	} else {
		$options .= '<option value="0">Selecteer eerst isolatie</option>' . PHP_EOL;
	}
	echo $options;
}
?>


Dit is "isolatie_calc.php" die iets uit een 3de , verzonnen, tabel haalt.

<?php
include('connect.php');
if( $_POST['id'] )
{
	$id = $_POST['id'];
	$res = '';
	$result = $db->query( 'SELECT * FROM isolatie_help WHERE huidig_help_id = "' . $id . '";' );
	while( $row = $result->fetch_object() )
	{
		$res .= $row->huidig_help_id . ' - ' . $row->huidig_help_uitleg;
	}
	echo $res;
}
?>


En om zelf te proberen, de SQL data

-- Adminer 4.7.6 MySQL dump

SET NAMES utf8;
SET time_zone = '+00:00';
SET foreign_key_checks = 0;
SET sql_mode = 'NO_AUTO_VALUE_ON_ZERO';

SET NAMES utf8mb4;

DROP TABLE IF EXISTS `isolatie_help`;
CREATE TABLE `isolatie_help` (
  `huidig_help_id` int(11) NOT NULL,
  `huidig_help_uitleg` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `isolatie_help` (`huidig_help_id`, `huidig_help_uitleg`) VALUES
(1,	'Geen isolatie nodig'),
(2,	'Goede isolatie scheelt een hoop'),
(3,	'Betere isolatie bespaart geld'),
(4,	'Beste isolatie redt de planeet');

DROP TABLE IF EXISTS `isolatie_huidig`;
CREATE TABLE `isolatie_huidig` (
  `huidig_id` int(11) NOT NULL,
  `huidig_status` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `isolatie_huidig` (`huidig_id`, `huidig_status`) VALUES
(1,	'Geen isolatie'),
(2,	'Goede isolatie'),
(3,	'Betere isolatie'),
(4,	'Beste isolatie');

DROP TABLE IF EXISTS `isolatie_renovatie`;
CREATE TABLE `isolatie_renovatie` (
  `renovatie_id` int(11) NOT NULL,
  `renovatie_status` varchar(50) NOT NULL,
  `huidig_id` varchar(50) NOT NULL,
  `indexwaarde` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `isolatie_renovatie` (`renovatie_id`, `renovatie_status`, `huidig_id`, `indexwaarde`) VALUES
(1,	'Geen isolatie',	'1',	'0.0'),
(2,	'Goede isolatie',	'2',	'0.5'),
(3,	'Betere isolatie',	'3',	'0.7'),
(4,	'Beste isolatie',	'4',	'0.9');

-- 2020-08-01 10:03:26


Succes. En als het misloopt, ik ontken alles.
R Roy B
01-08-2020 12:17
Dank je voor het meedenken en het voorbeeld!
Ik ga er dit weekend mee aan de slag en laat je dan weten of het gelukt is!

Reageren

Inloggen om te reageren