I'm trying to create a group of dropdowns to create a "search". Each dropdown should be hidden until the previous dropdown has been selected. The value of the previous selection is irrelevant to the values on the next dropdown. They should only just be hidden if the previous dropdown is still in the default value. Is there any way to make this possible? I've been able to hide the second dropdown but from the third and forward, I haven't been able to make them appear dynamically.
This is how all the dropdowns look without any css:
I would like to have every dropdown after "Year" to be hidden, and after each dropdown, the next one would appear.
This is my current code:
<form name="ftpquery" method="post" action="sendFTP.php">
<select name="year">
<option value="">Year</option>
<?php for($i = 1992; $i < 2016; $i++) { ?>
<option value = "<?php echo $i; ?>"><?php echo $i; ?></option>;
<?php } ?>
</select>
<select name = "julian">
<option value = "">Julian</option>
<?php
for($i = 1; $i < 366; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "station">
<option value = "">Station</option>
<?php
while ($row = mysqli_fetch_array($response)){
?>
<option value = "<?php echo $row['Station'] ?>"><?php echo $row['Station'] ?></option>;
<?php } ?>
</select>
<select name = "month">
<option value = "">Month</option>
<?php
for($i = 1; $i < 13; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "day">
<option value = "">Day</option>
<?php
for($i = 1; $i <= 31; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "hour">
<option value = "">Hour</option>
<?php
for($i = 0; $i <= 23; $i++){
?>
<option value = "<?php echo $i ?>"><?php echo $i ?></option>;
<?php } ?>
</select>
<select name = "min">
<option value = "">Min</option>
<option value = "00"><?php echo "00" ?></option>;
<option value = "15"><?php echo "15" ?></option>;
<option value = "30"><?php echo "30" ?></option>;
<option value = "45"><?php echo "45" ?></option>;
</select>
<select name = "version">
<option value = "">Version</option>
<option value = "a"><?php echo "a" ?></option>;
<option value = "b"><?php echo "b" ?></option>;
</select>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body>
Is there any way to make this possible?
Thank you for your time and help!
I'd run something in jQuery like this:
<style>
select.date-select {
display: none;
}
</style>
<script type="text/javascript">
function selectShowHide()
{
// Loop through all the .date-select selects
$("select.date-select").each(function() {
if ($(this).val() == 0) {
// If it has no value hide it
$(this).next("select.date-select").hide();
} else {
// If it does show it
$(this).next("select.date-select").show();
}
});
}
$(function(){
// On load activate the show hide
selectShowHide();
// Show the first one
$("select.date-select").first().show();
// On change of select work out what to hide
$("select.date-select").change(function(){
selectShowHide();
});
});
</script>
You'd need to give all of your selects a class of date-select:
<select class="date-select">
</select>
And a fiddle: http://jsfiddle.net/hnwLqo7h/
Related
I'm building a drop-down list with options containing data from a database and want to hide options which have zero data.
I have tried an if statement using continue but failing to catch the live data values from the database.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php foreach($database as $row):
if ($row['topic'] == 0) {
continue;
}
else {
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php endforeach; ?>
</select>
Is there any clever javascript-, php-, etc. code that can deactivate/hide options from a database which are empty.
Add this in your css:
select option:empty {
display:none
}
I think you should try this.
<select name='Database' title="Choose from database">
<option value="">All</option>
<?php
if(count($database) > 0)
{
foreach($database as $row)
{
?>
<option value="<?= $row['topic']; ?>"
<?php if ($row['topic'] == $_SESSION['prosess']){echo "
selected";}?>>
<?= $row['topic']; ?>
<?php }?>
</option>
<?php
}
}
?>
</select>
Hope it helpful for you.
Im trying to make a select that will help me in my "edit user" page.
I have this code but I don´t know how to change it so I can load the value selected from the database.
This code it´s working...
<div class="form-group">
<th><label for="text">Tipo Sanguineo:</label></th>
<td><select class="form-control" id="sangue" name="tipo_sangue">
<option value="O-" <?php if ($cl_tipo_sangue == "O-") echo 'selected';?> >O-</option>
<option value="O+" <?php if ($cl_tipo_sangue == "O+") echo 'selected';?> >O+</option>
<option value="A-" <?php if ($cl_tipo_sangue == "A-") echo 'selected';?> >A-</option>
<option value="A+" <?php if ($cl_tipo_sangue == "A+") echo 'selected';?> >A+</option>
<option value="B-" <?php if ($cl_tipo_sangue == "B-") echo 'selected';?> >B-</option>
<option value="B+" <?php if ($cl_tipo_sangue == "B+") echo 'selected';?> >B+</option>
<option value="AB-" <?php if ($cl_tipo_sangue == "AB-") echo 'selected';?> >AB-</option>
<option value="AB+" <?php if ($cl_tipo_sangue == "AB+") echo 'selected';?> >AB+</option>
</select></td>
</div>
I need to do this with this code:
<?php $dts = DBRead11(); ?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>"><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
The code that I need to change is loading the values from the database to the site, and Im not sure how to see the selected one if I load them from the database.
Try this,
<?php $dts = DBRead11(); ?>
<?php $cl_tipo_sangue = "B+"; ?>// here you need to add db value which you saved in DB
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>" <?php if ($cl_tipo_sangue == $option['nome']) { echo 'selected="selected"'; } ?> ><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
Steps:
1) Take an array to save drop down options' id name pairs.
2) Loop over it in the <select> tag for <option>s.
3) Check if selected id is the current iteration id.
4) If yes, add attribute selected="selected" to current <option>
And check in the loop if selected one.
<?php
$bloodGroups = [
'O-' => 'O-',
'O+' => 'O+',
'A-' => 'A-',
'A+' => 'A+',
'B-' => 'B-',
'B+' => 'B+',
'AB-' => 'AB-',
'AB+' => 'AB+'
];
?>
<div class="form-group">
<th><label for="text">Tipo Sanguineo:</label></th>
<td><select class="form-control" id="sangue" name="tipo_sangue">
<?php
if (! empty($bloodGroups)) {
foreach ($bloodGroups as $bgid => $bloodGroup) {
$selected = ($cl_tipo_sangue == $bgid) ? 'selected="selected"' : '';
?>
<option value="<?php echo $bgid;?>" <?php echo $selected;?>><?php echo $bloodGroup;?></option>
<?php
}
}
?>
</select></td>
</div>
You need to fetch the value you saving in database then
<?php
$nome = $database_value;
?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>" <?php echo ($option['nome'] == $nome)?'selected':'' ?>><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
Using javascript
<?php $dts = DBRead11(); ?>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
?>
<option value="<?php echo $option['nome']; ?>"><?php echo $option['nome']; ?></option>
<?php
}
?>
</select>
<script>
document.querySelector('#diretor_turma').value = '<?= $cl_tipo_sangue ?>'
</script>
<select name="diretor_turma" id="diretor_turma" required class="input-field4">
<?php
foreach($dts as $option) {
$select = (isset($cl_tipo_sangue) && $cl_tipo_sangue == $option['nome'])?"selected = 'selected'":"";?>
<option value="<?php echo $option['nome']; ?>" <?php echo $select; ?>><?php echo $option['nome']; ?></option>
<?php } ?>
</select>
I have this code
<?php for($i=1;$i<=5;$i++){ ?>
<select name="bonus<?php echo $i;?>" style="margin-top:30px;">
<?php foreach($bonusable as $bns) {?>
<option value="<?php echo $bns['type'];?>"><?php echo $bns['name'];?></option>
<?php } ?>
</select>
<?php }?>
This code display the five select and these have same options with the same value , and i need to delete the option if is selected in another select tag.. I have an image that shows what this code displays
please help me, and sorry for my English!
Try this below code
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div>
<?php for($i=1;$i<=5;$i++){ ?>
<select id="bonus<?php echo $i;?>" name="bonus<?php echo $i;?>" onchange="Process_form('<?php echo $i;?>',this.value)" style="margin-top:30px;" >
<option value="1">1</option>
<option value="2">2</option>
</select>
<?php }?>
</div>
<script>
function Process_form(Id,Value)
{
<?php for($i=1;$i<=5;$i++){ ?>
var i='<?php echo $i; ?>';
if(i!=Id)
{
$("#bonus"+i+" option[value="+Value+"]").attr('disabled','disabled');
}
<?php } ?>
}
</script>
This is the solution for this.. i tried everything but this give me an error when i click submit:
Undefined index: bonus1 ..
<script>
var $select = $("select");
$select.on("change", function() {
var selected = [];
$.each($select, function(index, select) {
if (select.value !== "") { selected.push(select.value); }
});
$("option").prop("disabled", false);
for (var index in selected) { $('option[value="'+selected[index]+'"]').prop("disabled", true); }
});
</script>
I want to have validation as dependent to each other with 3 select box options value example: if we select man 14 then remain 16 should be show in teenager and child after then i select 6 people in teenager then remain 10 people should be show in child option then child can be select only 10 they cant be more then people limit. see below image
$total_booked_people_limit = "30";
<div class="form-group" >
<label for="sel1"><b>Adults (18+):</b></label>
<select class="form-control" id="sel1">
<?php for($i=0; $i<=$total_booked_people_limit; $i++){
echo "<option value=\"$i\">$i</option>";
} ?>
</select>
<label for="sel1"><b>Teenager(14 - 17):</b></label>
<select class="form-control" id="sel1">
<?php for($j=0; $j<=$total_booked_people_limit; $j++) {
echo "<option value=\"$j\">$j</option>";
} ?>
</select>
<label for="sel1"><b>Children (7 - 14):</b></label>
<select class="form-control" id="sel1">
<?php for($k=0; $k<=$total_booked_people_limit; $k++) {
echo "<option value=\"$k\">$k</option>";
} ?>
</select>
Try this code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<?php $total_booked_people_limit = "30"; ?>
<div class="form-group" >
<label for="sel1"><b>Adults (18+):</b></label>
<select class="form-control first" id="sel1">
<?php for($i=0; $i<=$total_booked_people_limit; $i++) {
echo "<option value=\"$i\">$i</option>";
} ?>
</select>
<label for="sel1"><b>Teenager(14 - 17):</b></label>
<select class="form-control second" id="sel1">
<?php for($j=0; $j<=$total_booked_people_limit; $j++) {
echo "<option value=\"$j\">$j</option>";
} ?>
</select>
<label for="sel1"><b>Children (7 - 14):</b></label>
<select class="form-control third" id="sel1">
<?php for($k=0; $k<=$total_booked_people_limit; $k++) {
echo "<option value=\"$k\">$k</option>";
} ?>
</select>
<script type="text/javascript">
$(document).ready(function() {
$(".first").change(function() {
var first = $(".first").val();
var remaining = 30-first;
$('.second').children('option').remove();
for(firstcount = 0; firstcount <= remaining; firstcount++){
$(".second").append("<option>"+firstcount+"</option>");
}
});
$(".second").change(function() {
var first = $(".first").val();
var second = $(".second").val();
var firstsecond = +first + +second;
var remaining = 30-firstsecond;
$('.third').children('option').remove();
for(secondcount = 0; secondcount <= remaining; secondcount++){
$(".third").append("<option>"+secondcount+"</option>");
}
});
});
</script>
I have 10 dropdown menus that are like:
Please Select
Item 1
Item 2
Item 3
---Appetizers---
Item 4
Item 5
---Main Courses---
Item 6
Item 7
---Lunch Specials---
Item 8
I want to grab the value if an Item is selected and print it on a confirmation page. Can I do that with a for loop and javascript? Like if I do this, how would I call it in HTML?
function getItems() {
var items = [
document.getElementById("item1").value,
document.getElementById("item2").value,
document.getElementById("item3").value,
document.getElementById("item4").value,
document.getElementById("item5").value,
document.getElementById("item6").value,
document.getElementById("item7").value,
document.getElementById("item8").value,
document.getElementById("item9").value,
document.getElementById("item10").value
];
for (int i = 0; i < items.length; i++) {
var count = 0;
if (
(item[i] != "Please Select") ||
(item[i] != "---Appetizers---") ||
(item[i] != "---Main Courses---") ||
(item[i] != "---Lunch Specials---")
) {
document.getElementById(i).innerHTML = item[i];
count++;
}
}
}
The dropdowns are populated from a MySQL database using php. My HTML/php:
Item 4
<select id="item4">
<option value"">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value"">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value"">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value"">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>"><?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<br>
<?php } } ?>
</select>
<br>
You seem to generate a single drop down with all options. If that is intended, then make it one in which multiple selections can be made, which is not the default behaviour. For that to happen, add the multiple attribute to the select.
Then you need to add a listener to the change event, so that your code executes whenever the user selects or unselects item(s).
Note that you have forgotten some = after the value attributes. Also, it is not allowed to put a <br> tag after an option element. A select element should only have option children elements.
Here is how the corrected PHP could look:
Item 4
<select id="item4" multiple size="8">
<option value="">Please Select</option>
<?php if ($resultApp4->num_rows > 0) { ?>
<option value="">---Appetizers---</option>
<?php while($row = $resultApp4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($resultMain4->num_rows > 0) { ?>
<option value="">---Main Courses---</option>
<?php while($row = $resultMain4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
<?php if ($result4->num_rows > 0) { ?>
<option value="">---Lunch Specials---</option>
<?php while($row = $result4->fetch_assoc()) { ?>
<option value="<?php echo $row['price']; ?>">
<?php echo $row['name']; ?> - $<?php echo $row['price']?></option>
<?php } } ?>
</select>
The JavaScript could be much simpler, as in this working snippet:
// Listen to the selection changes made:
document.querySelector('#item4').addEventListener('change', function () {
// For this demo, the text is stored in a DIV
document.getElementById('output').textContent =
[...this.selectedOptions] // convert selected options list to array
.filter ( option => option.value.length ) // option must have a value
.map( option => option.textContent ) // get text of option
.join('\n'); // add line breaks
});
Item 4 (hold Ctrl key to add selections)<br>
<select id="item4" multiple size=8>
<option value="">Please Select</option>
<option value="">---Appetizers---</option>
<option value="1">drink 1 - $1</option>
<option value="1.10">drink 2 - $1.10</option>
<option value="">---Main Courses---</option>
<option value="15">dish 1 - $15</option>
<option value="16">dish 2 - $16</option>
<option value="">---Lunch Secials---</option>
<option value="10">lunch 1 - $10</option>
<option value="11">lunch 2 - $11</option>
</select>
<div id="output" style="white-space:pre"></div>