Develop Reference

How to select an option of a slim select with jquery

I have some concatenated selects that work fine. By the way, I would like to convert those selects into slim selects but I found some difficulties in doing that.
For example, I have a select with ID level_incarico.
When I select an option of level_incarico greater than zero other selects should appear.
After that, when I change an option of a concatenated select for example in select_nazione, the option change correctly.
But when I select another time the option zero in level_incarico and the I select another time an option greater than zero in level_incarico appears another time the select select_nazione with the option already selected previously.
This is my javascript code:
$("#level_incarico").change(function(){
var option_selected = $('option:selected', this).attr('value');
document.getElementById('level_incarico_selected').value = option_selected;
if (option_selected > 0) {
$('.nazione').css('display','block');
$('.regione').css('display','none');
$('.provincie').css('display','none');
$('.comune').css('display','none');
$('.altro_nazione').css('display','none');
$("#select_regione").val(0);
$("#select_provincia").val(0);
$("#select_comune").val(0);
$("#select_nazione").val(0);
$("#altro_input_nazioni").val("");
} else {
$('.nazione').css('display','none');
$('.regione').css('display','none');
$('.provincie').css('display','none');
$('.comune').css('display','none');
$('.altro_nazione').css('display','none');
$("#select_nazione").val(0); //here
$("#select_regione").val(0);
$("#select_provincia").val(0);
$("#select_comune").val(0);
$("#altro_input_nazioni").val("");
}
});
This is how I create the selects:
new SlimSelect({
select: '#select_nazione'
})
new SlimSelect({
select: '#level_incarico'
})
In other words, the reset of the selected options $("#select_nazione").val(0); does not work correctly. It works with normal selects, but not with slim select.
Here how I fill in level_incarico:
echo "<select id='level_incarico' name='level_incarico'>";
echo "<option></option>";
echo "<option value='0' " . (($ra_level == 0 && $id > 0) ? 'selected' : '') . " >Mondiale</option>";
echo "<option value='1' " . (($ra_level == 1 && $id > 0) ? 'selected' : '') . " >Nazionale</option>";
echo "<option value='2' " . (($ra_level == 2 && $id > 0) ? 'selected' : '') . " >Regionale</option>";
echo "<option value='3' " . (($ra_level == 3 && $id > 0) ? 'selected' : '') . " >Provinciale</option>";
echo "<option value='4' " . (($ra_level == 4 && $id > 0) ? 'selected' : '') . " >Comunale</option>";
echo "</select>";
Here how I fill in select_nazione:
echo "<select id='select_nazione' name='select_nazione' required>";
echo "<option value='0'>Seleziona...</option>";
while($row = $result->fetch_assoc())
{
$nazione_id_val=intval($row['country_id']);
$nazione_nome_val=$row['country_name'];
if($ra_level > 0) {
if ($nazione_id_val == $id_nazione)
{
$selected = "selected" ;
} else {
$selected = "" ;
}
}
echo"<option value='$nazione_id_val' $selected>$nazione_nome_val</option>";
}
echo "</select>";
Can help?

Why do you have an else for the values that are all 0
Why do you have display none in both branches?
Would this help you? I got the code from the manual
const $slimNazione = new SlimSelect({
select: '#select_nazione',
onChange: (info) => {
console.log(info.value)
}
})
const $slimIncario = new SlimSelect({
select: '#level_incarico',
onChange: (info) => {
console.log(info.value)
const val = +info.value;
$('.nazione').toggle(val > 0);
$('.regione').hide();
$('.provincie').hide();
$('.comune').hide();
$('.altro_nazione').hide();
$slimNazione.set('0')
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.css"/>
<select id='select_nazione' name='select_nazione'>
<option value="0">Seleziona...</option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
<select id='level_incarico' name='level_incarico'>
<option></option>
<option value='0'>Mondiale</option>
<option value='1'>Nazionale</option>
<option value='2'>Regionale</option>
<option value='3'>Provinciale</option>
<option value='4'>Comunale</option>
</select>

slim-select is built without jQuery...on purpose. If you have jQuery (and plan on keeping it in your stack), I would recommend using select2 instead. slim-select is a great library and has a smaller foot print due to not being dependent on jQuery. But, select2...dare I say...is better. Or, at least has more convenience features. I found select2 easier to use, but my desire to cut out jQuery led me to adopt slim-select.

Get two values from select option at once

How can I have to values at once from select options through JavaScript function?
Here is my code:
<select name="ledger" id="ledger" onchange="setDebit(this.value)" required>
<option value="" >Select</option>
<?php
$ledgerResult = $this->db->query('SELECT * FROM ledger WHERE account_type = "Creditors" ORDER BY name');
$ledgerData = $ledgerResult->result();
for ($c = 0; $c < count($ledgerData); ++$c) {
$ledger_id = $ledgerData[$c]->id;
$ledger_name = $ledgerData[$c]->name;
$ledger_credit = $ledgerData[$c]->credit; ?>
<option value="<?php echo $ledger_id;?>"><?php echo $ledger_name;?></option>
}
</select>
<script>
function setDebit(ele){
document.getElementById("set_debit").value = ele;
}
</script>
I am getting $ledger_id and sending this value through setDebit() to the script. But what I need is to send $ledger_credit. I can do it by setting it as option value instead of $ledger_id; but I also need value of selectas $ledger_id.
How can I set $ledger_id as option value, but send $ledger_credit through setDebit(this.value)?

<option value="<?php echo $ledger_id.":".$ledger_credit;?>"><?php echo $ledger_name;?></option>
function setDebit(ele){
var Value = document.getElementById("ledger").val();
var Parts = Value.split(":");
var LedgerID = Parts[0];
var LedgerCredit = Parts[1];
}

If you are not using jquery.
<option value="<?php echo $ledger_id."||".$ledger_credit; ?><?php echo $ledger_name;?> </option>
<script>
function setDebit(){
var details = document.getElementById("ledger").value;
var allData = details.split("||");
var ledger_id = allData[0];
var ledger_credit = allData[1];
console.log(ledger_id);
console.log(ledger_credit);
}
</script>

You have to set the attribute multiple in the HTML part:
http://www.w3schools.com/tags/att_select_multiple.asp
After that you can have a look at this question for further info:
How to get all selected values of a multiple select box using JavaScript?

You can add an atribute data-credit in yours options
<option value="<?php echo $ledger_id;?>" data-credit="<?php echo $ledger_credit;?>"><?php echo $ledger_name;?></option>
And in the setDebit function:
var ledger_credit = $('option:selected', "#ledger").data('credit');
You must use jquery in this solution

This function how to use switch case

I am new in PHP and JS. This function use to get only one vales.
In my program dept1 values are 5 and 1st value select onchange in 1, 2nd select onchange in 2, 3rd value select onchange in 3. so any idea to give code for switch case.
<script>
function deptchange()
{
var x = document.getElementById("dept1").value;
document.getElementById("dept2").value = 2;
}
</script>
<input class="form-last-name form-control" id= 'dept1'
onchange="deptchange()" list="dept" value='<?php echo $dept; ?>' name="department"/>
<datalist id="dept">
<option>
<?php
include 'dblayer.php';
$query = mysqli_query($mysqli,"SELECT department FROM department");
while($row=mysqli_fetch_array($query))
{
echo "<option value='". $row['department']."'>".$row['department'] .'</option>';
}
?>
</option>
</datalist>
<input type="hidden" id='dept2' value=' 'class="form-first-name form-control" />

You can use array with push, So after finished your 5 selection all 5 values push to values array.
<script>
var values = [];
function deptchange()
{
values.push(document.getElementById("dept1").value);
}
</script>
To get the stored elements from array.
var firstElement = values[0];

datalist's option should have value attribute. and there is no need to put closing tag. it's different from select's option.
<datalist id="dept">
<?php
include 'dblayer.php';
$query = mysqli_query($mysqli,"SELECT department FROM department");
while($row=mysqli_fetch_array($query)) {
echo "<option value='". $row['department']."'>';
}
?>
</datalist>

Dynamic PHP array with accordingly added onchange scripts

So the code below works for this particular example, and I would like to make it work in scenario where the amount of forms select + input type is dynamic determined by user on previous page. So now we have in php array of $champion[] = ("Aatrox", "somethingelse", "somethingelse2"); so now we loop the amount of select and input fields. Every champion has different spells so now when you choose Q for first champion AAtrox in input you will see "Spell1" below in somethingelse input user might want to choose E and he will see the name of the spell for that champion in the input form
<?php
$champion = "Aatrox"
?>
<select id="spell" name="spell" onchange="val()">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname" disabled>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(d) {
if(typeof d === "undefined"){
d = document.getElementById("spell").value;}
var spellname = document.getElementById("spellname");
spellname.value=champions["<?php echo $champion; ?>"][change(d)];
}
val("Q");
</script>
I can't really figure out dynamic how to check dynamic array from PHP in this javascript script

Not sure if I fully understand what you're trying to accomplish here, but here's a go at it.
<?php
$champions = array("Aatrox","Ahri");
foreach($champions as $champion){
?>
<select id="spell-<?php echo $champion ?>"
name="spell" onchange="val('<?php echo $champion ?>')">
<option value="Passive">Passive</option>
<option value="Q" selected>Q</option>
<option value="W">W</option>
<option value="E">E</option>
<option value="R">R</option>
</select>
<input type="text" id="spellname-<?php echo $champion ?>" disabled>
<?php } //end foreach ?>
<script>
var champions = {
"Aatrox":["Passive", "spell1", "spell2", "spell3", "spell4"],
"Ahri":["Passive", "spell1", "spell2", "spell3", "spell4"]
};
function change(x){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
return x;
}
function val(championName) {
d = document.getElementById("spell-" + championName).value;
var spellname = document.getElementById("spellname-" + championName);
spellname.value=champions[championName][change(d)];
}
<?php foreach($champions as $champion) {
echo "val(" . $champion . ");";
} ?>
</script>
Keep in mind it is generally bad practice to mix server side code with client side code. Although, at this point it would require a restructure of how you're handling everything (using AJAX to load JSON for example). I highly encourage you to research the topic.

how to keep default end time 3hrs from starttime?

First check facebook event create page the link is http://www.facebook.com/?ref=home#!/events/create.php I am using the start and end date time of that page in my application.My question is if i set start time 12pm ,the default end time should be 3hrs after that that is end time =3pm (if the user does not set end time)
code for start time
<select name="menu" class="style24">
<option value="00:00" <?php if($todaytime=="01"){echo "selected";}?>>12:00am</option>
<option value="00:30" <?php if($todaytime=="01"){echo "selected";}?>>12:30am</option>
<option value="01:00" <?php if($todaytime=="02"){echo "selected";}?>>1:00am</option>
<option value="01:30" <?php if($todaytime=="02"){echo "selected";}?>>1:30am</option>
<option value="02:00" <?php if($todaytime=="03"){echo "selected";}?>>2:00am</option>
<option value="02:30" <?php if($todaytime=="03"){echo "selected";}?>>2:30am</option>
<option value="03:00" <?php if($todaytime=="04"){echo "selected";}?>>3:00am</option>
<option value="03:30" <?php if($todaytime=="04"){echo "selected";}?>>3:30am</option>
</select>
code for end time
<select name="menu1" class="style24">
<option value="00:00" <?php if($todaytime=="01"){echo "selected";}?>>12:00am</option>
<option value="00:30" <?php if($todaytime=="01"){echo "selected";}?>>12:30am</option>
<option value="01:00" <?php if($todaytime=="02"){echo "selected";}?>>1:00am</option>
<option value="01:30" <?php if($todaytime=="02"){echo "selected";}?>>1:30am</option>
<option value="02:00" <?php if($todaytime=="03"){echo "selected";}?>>2:00am</option>
<option value="02:30" <?php if($todaytime=="03"){echo "selected";}?>>2:30am</option>
<option value="03:00" <?php if($todaytime=="04"){echo "selected";}?>>3:00am</option>
<option value="03:30" <?php if($todaytime=="04"){echo "selected";}?>>3:30am</option>
<option value="04:00" <?php if($todaytime=="05"){echo "selected";}?>>4:00 am</option>
</select>
$todaytime is defined as date("H", time()).

Assuming your first select has id="start" and the other selct has id="end", the code should be like this (pure javascript and jquery):
<script>
function hhmm2minutes(hhmm){
var hhmmArray = hhmm.split(":");
return parseInt(hhmmArray[0], 10)*60 + parseInt(hhmmArray[1], 10);
}
function minutes2hhmm(minutes){
minutes = minutes % (24*60); //To avoid having hour > 23
function addZero(x){
return (x < 10 ? "0"+x : ""+x) ;
}
var mm = minutes % 60;
var hh = (minutes - mm)/60;
return addZero(hh) + ":" + addZero(mm);
}
function setEnd3HoursFromStart(){
var hhmmStart = $("#start").val();
if(hhmmStart=="") return;
var hhmmEnd = minutes2hhmm(hhmm2minutes(hhmmStart) + 180); //Add 180 minutes
$("#end").val(hhmmEnd);
}
$(document).ready(function(){
setEnd3HoursFromStart();
$("#start").change(function(){
setEnd3HoursFromStart();
});
});
</script>
Hope this helped. Cheers

Make your
<?php if($todaytime=="01"){echo "selected";} ?>
into a function call:
<?php selectstarttime(time) ?> //in your starttime code
<?php selectendtime(time) ?> // in your endtime code
function selectstarttime(time){
if (something like time==currentTime){
return "selected";
}
else
return "";
}
}
function selectendtime(time){
if (something like time==currentTime + 3hours){
return "selected";
}
else
return "";
}
}