2 selcect med år

PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Lägg ett bokmärke på hela tråden
Skapa nytt inlägg   Svara på inlägget
Visa föregående ämne :: Visa nästa ämne  
Startad av: Meddelande
wonderwizard



Medlem i: 6443 dagar

Status: Offline



#742791
Inlägg Skrivet: 2020-05-22 21:39      Ämne: 2 selcect med år Citera

Jag är sämst på att förklara saker, men jag försöker
jag är ute efter följande


2 st select dropdown med årtal (från år / till år)
första har detta året som selected, andra är disabled

väljer jag 1972 på första, skall andra aktiveras, fast bara från 1972 och framåt, med 1972 som selected.

gör man detta med php, javascript, ajax, vad ? eller en kombo ?

gärna helt klar Wink men om det finns ngn bra guide eller tutorial så blir jag glad
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
harald_b
Moderator



Medlem i: 5091 dagar
Från: Tavesta
Status: Offline



#742792
Inlägg Skrivet: 2020-05-23 00:07      Ämne: Citera

Du löser det här problemet med javascript, eller möjligtvis med jquery, om du är road av att använda det.

Det finns ett attribut och en egenskap i <option>-elementen som heter disabled, som inledningsvis kan sättas till värdet "disabled" på alla optionelement i din andra <select>.
Sedan fångar du upp onchange på din första <select>, läser av value, och loopar igenom alla option-element i din andra select, och sätter disabled till true om deras value är mindre än värdet du läste av, och i annat fall sätter du värdet till false.

För att ändra valt värde i din andra <select> så sätter du helt enkelt dess value till samma som i din första <select>.

Jag överlåter på dig att sätta ihop själva koden.
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
wonderwizard



Medlem i: 6443 dagar

Status: Offline



#742793
Inlägg Skrivet: 2020-05-24 11:53      Ämne: Citera

Eftersom jag inte är speciellt duktig på javascript, så hittade jag en efter lite googlande, som jag har anpassat efter mina behov.
dock inte riktigt 100 än.

select 2 är inte disabled & oavsett år på första väljer den 2020


<?php
$currently_selected = date('Y');
$earliest_year = 1950;
$latest_year = date('Y');

print "<select name='year_from' class='form-control' id='yr1'>";
foreach ( range( $latest_year, $earliest_year ) as $i ) {
print '<option value="'.$i.'"'.($i === $currently_selected ? ' selected="selected"' : '').'>'.$i.'</option>';
}
print '</select>';
?>

<select name='year_to' class="form-control" id="yr2">
<option value="" selected>To year</option>
</select>


<script>
$(document).ready(function() {
$('#yr1').on('change', function() {
var allOptions = $('#yr1 option');
var allYr2Options = $.map(allOptions, function(option) {
var yrSelected = $('#yr1 option:selected').val();
var val = option.value;
return ((val >= yrSelected) ? val: null);
});

var allOptsHTML = '';
$(allYr2Options).each(function() {
allOptsHTML += '<option value="'+ this +'">'+ this +'</option>';
});
$('#yr2').html(allOptsHTML);
});
});
</script>
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
harald_b
Moderator



Medlem i: 5091 dagar
Från: Tavesta
Status: Offline



#742794
Inlägg Skrivet: 2020-05-24 13:46      Ämne: Citera

Din kod är nog lite mer komplicerad än vad jag tänkte mig att behövs för att åstadkomma det du beskrev.
Vad jag känner till så går det numera bra att både läsa från och skriva till medlemen value på <select>-elementet för att få den att välja en viss <option>.
Du behöver alltså inte loopa igenom alla options för att fixa den saken.

Jag tänkte mig nog att din andra <select> (yr2) nog kunde ha alla option-element redan från början, fast i disableat tillstånd.
Eftersom ett av åren i din första select redan verkar vara valt från början så kan ju alla option före det året vara disableade i din andra <select>, istället.
Den biten löser du nog bäst med php.

Om alla <option> redan från början finns i din andra <select> så behöver du bara loopa igenom den för att ställa in vilka option som skall vara disabled.

Det hela behöver inte bli mer kod än att du kan ha det i onchange-attributet på din första select.
Utan att använda jquery så skulle koden där kunna bli:
KOD:
1:
var yr2 = document.getElementById('yr2'); //hitta din andra select
2:
for(var opt of yr2.options) opt.disabled = opt.value < this.value; //Sätt disabled på år före det valda året
3:
yr2.value = this.value; //Välj samma år som i din första select
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
wonderwizard



Medlem i: 6443 dagar

Status: Offline



#742795
Inlägg Skrivet: 2020-05-25 21:07      Ämne: Citera

detta blev resultatet efter många om och men...
jag är ny på både php & javascript, men gör så gott jag kan

all kritik tas emot & även förbättringar av kod


<form action="<?php echo $_SERVER['REQUEST_URL']; ?>" method="post" enctype="multipart/form-data">

<!-- select make starts -->
<select name="make" id="make" class="form-control">
<option value="">--- Select Make ---</option>
<?php mysqli_query ?>
</select>

<!-- select modell starts -->
<select name="modell" id="modell" class="form-control" disabled>
<option>--- Select Modell ---</option>
</select>

<!-- from year -->
<select name="year_from" id="first" class="form-control" disabled>
<option value="" selected>--- Select From year ---</option>
<?php
for ($i = date('Y'); $i >= 1950; $i--){
echo "<option>$i</option>";
}
?>
</select>

<!-- to year -->
<select name="year_to" id="second" class="form-control" disabled>
<option value="" selected>--- Select To year ---</option>
</select>

<!-- Start choose manualtype dropdown-->
<select name="manualtype" id="manualtype" class="form-control" disabled>
<option value = "">--- Select Type of manual ---</option>
<?php mysqli_query ?>
</select>

<!-- choose language on manual -->
<select name="language" id="language" class="form-control" disabled>
<option value = "">--- Select Language ---</option>
<option value = "Swedish">Swedish</option>
<option value = "English">English</option>
<option value = "German">German</option>
<option value = "Multi">Multilingual</option>
</select>

<input type="file" class="file-input" name="file-input">
<button type="submit" id="bikepicker" class="btn btn-primary" name="uploadfile"><i class="fa fa-upload"></i> Upload</button>
<button type="reset" class="btn btn-reset" value="reset"><i class="fas fa-times"></i> Reset</button>
</form>



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

$.ajax
({
type: "POST",
url: "bikepicker/ajax.php",
data: post_id,
cache: false,
success: function(modells)
{
$("#modell").html(modells);
}
});

});
});
</script>


<script>
$("#first").change(function(){
var val = $("#first option:selected").html();
$("#second").html("");
var d = new Date();
var n = d.getFullYear();

for (i=val; i<=n;i++){
$("#second").append("<option>" + i + "</option>");
}
});
</script>


<script>
$('#make').change(function() {
if(this.value == ""){
$("#modell").prop("disabled", true);
}else{
$("#modell").prop("disabled", false);
}
});

$('#modell').change(function() {
if(this.value == ""){
$("#first").prop("disabled", true);
}else{
$("#first").prop("disabled", false);
}
});

$('#first').change(function() {
if(this.value == ""){
$("#second").prop("disabled", true);
}else{
$("#second").prop("disabled", false);
}
});

$('#second').change(function() {
if(this.value == ""){
$("#manualtype").prop("disabled", true);
}else{
$("#manualtype").prop("disabled", false);
}
});

$('#manualtype').change(function() {
if(this.value == ""){
$("#language").prop("disabled", true);
}else{
$("#language").prop("disabled", false);
}
});
</script>
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
harald_b
Moderator



Medlem i: 5091 dagar
Från: Tavesta
Status: Offline



#742796
Inlägg Skrivet: 2020-05-27 01:21      Ämne: Citera

Det finns ett antal förenklingar som kan göras i koden, i stil med
KOD:
1:
if(this.value == ""){
2:
$("#first").prop("disabled", true);
3:
}else{
4:
$("#first").prop("disabled", false);
5:
}

kan förenklas till
KOD:
1:
$("#first").prop("disabled", this.value == ""? true: false);

eller bara
KOD:
1:
$("#first").prop("disabled", this.value == "");


Men det jag ser som den allvarligaste bristen är att du direktlänkar jquery från tredje part. Den typen av inlänkning av javascript öppnar upp en bakdörr in i din kod som är näst intill omöjlig att upptäcka om den används.
Du håller din kod betydligt säkrare om du laddar ner jquery till din egen server, och låter dina besökare ladda den därifrån istället.
All inlänkning av material från tredje part bör ske med stor försiktighet. Det finns många fulingar som denna tredje part kan hitta på gentemot dina besökare.
 

_________________
R.r - Ett fritt affärssystem
Till toppen på sidan
Visa användarprofil Skicka privat meddelande
wonderwizard



Medlem i: 6443 dagar

Status: Offline



#742797
Inlägg Skrivet: 2020-05-27 20:21      Ämne: Citera

harald_b skrev:
Det finns ett antal förenklingar som kan göras i koden, i stil med
KOD:
1:
if(this.value == ""){
2:
$("#first").prop("disabled", true);
3:
}else{
4:
$("#first").prop("disabled", false);
5:
}

kan förenklas till
KOD:
1:
$("#first").prop("disabled", this.value == ""? true: false);

eller bara
KOD:
1:
$("#first").prop("disabled", this.value == "");


Men det jag ser som den allvarligaste bristen är att du direktlänkar jquery från tredje part. Den typen av inlänkning av javascript öppnar upp en bakdörr in i din kod som är näst intill omöjlig att upptäcka om den används.
Du håller din kod betydligt säkrare om du laddar ner jquery till din egen server, och låter dina besökare ladda den därifrån istället.
All inlänkning av material från tredje part bör ske med stor försiktighet. Det finns många fulingar som denna tredje part kan hitta på gentemot dina besökare.


tack för förenklingen

ang länka till tredje part så har jag tänkt på det..
nu testar jag mig fram, men tanken är att spara ner på egen server
 
Till toppen på sidan
Visa användarprofil Skicka privat meddelande MSN Messenger
Visa tidigare inlägg:   
Skapa nytt inlägg   Svara på inlägget
PHPportalen Forum Index » HTML/CSS/JavaScript/Design
Hoppa till:  
Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic