How to modify the function below to fetch all the elements based on the selected category? I simply want to fetch and show information without having to click on a button/ submission. Please guide how this can be achieved? I am open to suggestions.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function getProdNames(){
//How to alter this to fetch & display all the elements from col (product_name) based on the selected category.
var product_name = $('#category').find(':selected').data('product_name');
$('#prodNames').val(product_name);
}
</script>
</head>
Php:
<body>
<form>
<select id="category" name="category" onClick="getProdNames();>
<option> <?php
// Attempt select query execution
$sql = "SELECT * FROM TABLE1";
if($result = $mysqli->query($sql)){
if($result->num_rows > 0){
while($r = $result->fetch_array()){
echo "<option
data-productName='$r[2]'
data-color='$r[3]'
value='$r[1]'> $r[1] </option>";}
} } ?>
</option>
</select>
//Display Product Names based on the selected category here in the form of multi select list
<input name="prodNames" id="prodNames" class="form-control"/>
Desired output: If user selects toy. This should trigger the onClick function to show all the productNames associated with this cateogory. Hence, the following output based on this example:
ABC
DEF