We Keep Coding

Filter HTML Dropdown Based on Another Dropdown Selection [duplicate]

This question already has answers here:
What's the best and easiest way to Populate a dropdown based on another dropdown
(2 answers)
Closed 6 years ago.
I have multiple HTML dropdowns. After one selection, I want it to automatically populate the next dropdown. All of this information is being brought in to populate the lists from a database using a SQL statement and foreach loop, so I cannot hard code the values like all of the examples out there related to my question. I currently have just a bit of JavaScript for this as of now although I am not sure if I am going in the right direction. I am thinking that this will need to involve some AJAX and an onChange listener. I am just unsure of how to get started.
So how can I do this? I am not asking for you to do this for me, but just some code (like an outline) to give me a head start and get me going would be appreciated! Thank you!
SQL Statements:
<?php
$host="xxxxxxx";
$dbName="xxxx";
$dbUser="xxxxxxxxxxxxxx";
$dbPass="xxxxxxxxxxx";
$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sql_major = "SELECT DISTINCT [Major Category] FROM vProducts ORDER BY [Major Category] ASC";
$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts ORDER BY [Minor Category] ASC";
$sql_code = "SELECT DISTINCT [Product Report Code] FROM vProducts ORDER BY [Product Report Code] ASC";
$dropdown_major = $dbh->query($sql_major);
$dropdown_minor = $dbh->query($sql_minor);
$dropdown_code = $dbh->query($sql_code);
?>
Dropdowns:
<table cellspacing="5" align="center" id="dropdown-table">
<thead>
<tr>
<th>Major Category</th>
<th>Minor Category</th>
<th>Report Code</th>
<th>SKU</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select id="major" onChange="updateCat();">
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<?php foreach ($dropdown_major->fetchAll() as $drop_major): ?>
<option
value=""
data-name="<?php echo $drop_major ['Major Category'];?>"
>
<?php echo $drop_major ['Major Category'];?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<select id="minor">
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<?php foreach ($dropdown_minor->fetchAll() as $drop_minor): ?>
<option
value=""
data-name="<?php echo $drop_minor ['Minor Category'];?>"
>
<?php echo $drop_minor ['Minor Category'];?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<select>
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<?php foreach ($dropdown_code->fetchAll() as $drop_code): ?>
<option
value="code"
data-name="<?php echo $drop_code ['Product Report Code'];?>"
>
<?php echo $drop_code ['Product Report Code'];?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<select>
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<option value="sku">SKU</option>
</select>
</td>
<td><input type="button" value="Search" id="searchButton" onclick="show();"></td>
<td><button class="create-user" id="insertButton">Add Group</button></td>
</tr>
</tbody>
</table>
JavaScript:
// JS for Dropdown
function updateCat() {
var e = document.getElementById("major");
var majorSelected = e.options[e.selectedIndex];
document.getElementById("minor").value = majorSelected.dataset.name;
}

As a starting point I would suggest looking at the W3schools section on AJAX PHP.
Using an AJAX PHP one approach to this would be to leverage the DOM onchange event of your dropdown to pass the selected value through to a PHP page via XMLHttpRequest in a javascript function.
The PHP page could then be set up to return the second list of values from the database. The returned data could be the elements for your second dropdown.
Looking at your code I would perform the first SQL query to generate the major category items in the main page where your table resides. The second SQL query for your minor category items would then reside in your second page where the AJAX call is made. The second query will only be invoked then when the value within your dropdowns are changed.
UPDATE 1: Adding some code
1. Major Items Select Box
Run your SQL query to generate your values for the major options.
<select id="majoritems" onChange="updateCat();">
<option value="" disabled="disabled" selected="selected">Please Select One</option>
<?php echo $major_options; ?>
2. Minor Items Select Box
<select id="minoritems">
<option value="" disabled="disabled" selected="selected">Please Select One</option>
3. Javascript AJAX Call
The following draws on the W3Schools AJAX PHP example primarily.
<script>function updateCat(val){
if (val.length == 0) {
document.getElementById("minoritems").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("minoritems").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getminoritems.php?q=" + val, true);
xmlhttp.send();
}}</script>
When the getminoritems.php page is called the URL parameters are set which will send the val variable across as a GET variable. This can then be used to query the items in the database based on that value.
4. Your PHP page to return the list of minor options based on the value sent in the AJAX GET call
In your PHP page you should now be able to access the $_GET variable q which was set in the AJAX call with the value of val. Taking this you can query your database, e.g.
$val = $_GET['q'];
$sql_minor = "SELECT DISTINCT [Minor Category] FROM vProducts WHERE category = $val ORDER BY [Minor Category] ASC";
etc etc...your code to return values
Make sure to return the values within <option>tags in the end. They will be output within in the minoritems select element as the javascript function uses the .innerhtml to set it to the response text received from your AJAX call.
Hope this helps!
PS: I would suggest doing a very very simple example using the W3schools tutorial if you can so that you can get your head fully around what is happening here.

Put value from javascript combo box

I want to get the value from a combo box in javascript.
This is the combo box code:
<select name="no_kk" style="width: 68%;" class="select2" id="no_kk" onchange="get_Nokk(this.value);" >
<option value="">-- Pilih Nomor KK --</option>
<?php
$kk = get_no_kk();
foreach ($kk as $key => $value) {?>
<option value="<?php echo $value->no_kk;?>"><?php echo $value->no_kk;?></option>
<?php
}
?>
</option>
</select>
I want to put the value I choose in this code here:
<div class="right">
TAMBAH
</div>

Here you have a problem. Is better for you to leave the href empty and then replace it using JS. I let you an example:
function calculateURL(option){
return a + option;
}
(function() {
console.log(document.querySelector(".button-submit-blue").href)
document.querySelector("#mySelect").addEventListener("change", function(evt){
var option = document.querySelector("#mySelect").value;
document.querySelector(".button-submit-blue").href = calculateURL(option);
alert("The value selected is: "+document.querySelector("#mySelect").value);
alert("The new link is: " + document.querySelector(".button-submit-blue").href)
}, false);
})();
<script>
var a = "http://www."; //this represents values grab from PHP
</script>
<select id="mySelect">
<option value="">--</option>
<option value="google.com">google</option>
<option value="yahoo.com">yahoo</option>
</select>
<div class="right">
TAMBAH
</div>
This is easy. First of all you need to set a listener for the change event on your select. This is set using addEventListener function. This function has several arguments, the first is the event you want to listen, change, the second is the callback, which will be executed everytime the event change is fired. Finally, you only have to take the selected option and recalculate your url.

jQuery change the value of a variable on dropdown select from database

I am working on a project where I am stuck at a point right now. I need to change the value of a DIV live on select of the dropdown using jQuery.
Example:
I want this:-
<select name="">
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
When I will select option 1 the value will be displayed in place of 0 in DIV live. The problem is that as this select value fetches data from the database I am not understanding how to do it.
Example:
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>"><?php echo $ac_fetch['adclk_clicks']; ?> clicks</option>
<?php } ?>
</select>
jQuery that I used currently:-
$(document).ready(function(){
$("#pln").click(function(){
$("#chpln").text("Plan: <?php echo $ac_fetch['adclk_clicks']; ?> secs");
});
});
This jquery is changing the value currently but I am getting only the first value of the database i.e., 10. When I choose different option it still displays the first value from the database i.e., 10 while it should actually display the second value that is 20. Please help me. FIDDLE will be appreciated.

click is a wrong event for selection box
you can utilize change event for your result.
$(document).ready(function(){
$("#pln").change(function(){
$("#chpln").text("Plan: "+$(this).val()+" secs");
});
});

For Dropdown, click(function() is not applicable. Use change(function().
I gave you 2 way. Use any one.
I) Method - 1 (Using Ajax)
<select name="" id="pln" class="select-box" style="margin-top: -40px;" />
<?php while($ac_fetch = mysql_fetch_array($qur_ac)){ ?>
<option value="<?php echo $ac_fetch['adclk_clicks']; ?>">
<?php echo $ac_fetch['adclk_clicks']; ?> clicks
</option>
<?php } ?>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
var selectBoxClicks = $('.select-box').val();
$.ajax({url:"AjaxShowClickValue.php?selectBoxClicks="+selectBoxClicks,cache:false,success:function(result){
$('#chpln').html(result);
}});
});
</script>
Create a new page, namely AjaxShowClickValue.php.
AjaxShowClickValue.php (Make Sure, if you changing page name here. Then, change in <script></script> tag too. Both are related.)
<?
echo "Clicks: ".$_GET['selectBoxClicks']." clicks";
?>
II) Method - 2
<select name="" class='select-box'>
<option value="10">10 clicks</option>
<option value="20">20 clicks</option>
<option value="30">30 clicks</option>
<option value="40">40 clicks</option>
</select>
<div id="chpln">Clicks: 0 clicks</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$('.select-box').change(function(){
$("#chpln").text("Clicks: "+$(this).val()+" clicks");
});
</script>

use jQuery Ajax for making request to the php file..
and use on .change() rather than .click() for changing the dropdown value..
the code will be placed in JS file which make ajax call to the php file on your server..
The php file will takes some params (if any) and perform select query to the databases and return result in response.. in php use json_encode(data) for that..
These examples may also help:
http://www.plus2net.com/php_tutorial/ajax_drop_down_list.php
http://www.plus2net.com/php_tutorial/php_drop_down_list.php
You will find many other examples - Just Google It and understand the key concept!
Hope this helps.

Select2 - Multiple tags not working

I'm trying to use Select2 (https://select2.github.io) to allow a user to type multiple tags into a field before submitting a form. In my Laravel PHP app, I'll then take those tags, determine if they exist and add them into a database.
My problem is that I can't seem to get Select2 to recognise there are multiple tags being entered by the user. When I interrogate the form data, I only see the LAST tag a user typed as opposed to ALL the tags.
My Select2 element is:
<select class="tags-field" name="tags" data-tags="true" data-placeholder="TAGS" multiple="multiple">
</select>
and my JQuery is:
$(function() {
$(".tags-field").select2({
maximumSelectionLength: 3,
tokenSeparators: [','],
});
}
There are no Javascript errors and it works perfectly fine except I cannot detect ALL the tags.

To cause PHP to make all the selected choices available as an array, suffix your select name with a pair of square brackets, like this:
<select class="tags-field" name="tags[]" data-tags="true" data-placeholder="TAGS" multiple="multiple">
If this form is sent to a PHP program, the value of $_POST['tags'] will be an array. Note that the square brackets in the form control name aren't a part of the array key. You would process such a form like this:
<?php
$tags = $_POST['tags'];
// Note that $tags will be an array.
foreach ($tags as $t) {
echo "$t<br />";
}
?>
References here: http://bbrown.kennesaw.edu/papers/php2.html

use hidden input field in order to send all values
use onsubmit event to set the value of the hidden field
HTML:
<form method="post" action="post.php">
<select multiple id="e1" style="width:300px" name="_state">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="hidden" name="state" value="" />
<input type="submit"/>
</form>
JQ:
$("#e1").select2();
$('form').submit(function () {
var newvalue = '';
var value = $('select[name="_state"]').val();
if (value) {
newvalue = value;
}
$('input[name="state"]').val(newvalue);
})

to make value selected obtained from javascript

my code is as follows
and m getting the value from javascript
<script type="text/javascript">
function show(desig){
document.getElementById("designation").value=desig;
}
</script>
<select id="designation" name="designation">
<?php
while($row_address=mysql_fetch_array($loc))
{
<option value="" selected="selected"><?=$row_address['location']?></option>
<?php }?>
</select>
but m not able to find the solution to tick that particular value obtained from javascript
in dropdown

I tested your code tested a simplified version of your code and it works fine. The one thing to note is that you must give it a value that does exist as an option.
Here is the code i used in full:
<!DOCTYPE html>
<html>
<body>
<select id="designation" name="designation">
<option value="some value" selected="selected">some text</option>
<option value="some value 2" selected="selected">some other text</option>
</select>
</body>
</html>
<script type="text/javascript">
function show(desig){
document.getElementById("designation").value=desig;
}
show('some value 2');
</script>
Note that if I called show('blah') it would not have worked since that isn't a valid option value.
Edit: your php code seems to have a few syntax issues and you also do not specify a value= property other than an empty string - which is probably a big part of why it isn't working. Try
<?php
while($row_address=mysql_fetch_array($loc)) {
$location = $row_address['location'];
echo "<option value='$location'>$location</option>";
}
?>