JavaScript Auswahl von select soll downloadlink darunter direkt ändern

[xep22]

moin, habe hier dieses kleine download-Script mit php. man soll vorher die Datei auswählen können, darunter ist direkt der download-link, wie mache ich das aber dass sich dieser direkt nach dem Klicken auf z.B. file2 dann ändert ? nach Möglichkeit ohne Seiten refresh. Denke ja mal mit JS irgendwie...

<?php
echo "<select name='file'>
        <option selected>download...</option>
        <option value='1'>file1</option>
        <option value='2'>file2</option>
        <option value='3'>file3</option>
    </select>
<a href='php/dl.php?file=HIER_SOLL_DAS_VALUE_VON_SELECT_STEHEN'><button>download</button></a>";
?>

 

[meph!sto]

$value ?

 

[xep22]

was wie ? soll ja ohne seite neuladen sein, also JS...

 

[Lawnmower]

Mit value (aktueller Wert von Select) oder/und change Event (wird ausgelöst wenn im Select die Auswahl geändert wird).
Müsstest per Google schnell zu einem Ergebnis kommen (Stackoverflow z.B.).

 

[xep22]

aber ich brauche das value ja als php variable...

 

[Exterior]

Also jetzt wird's seltsam...

Wenn du im Browser ohne neuladen was änderst, merkt dein PHP davon gar nichts, wie auch? Könntest höchstens einen Ajax-Call machen und den Wert dort hin schicken, aber das klingt nicht so, als ob du das machen willst.

Du solltest nochmal ganz genau erklären, was du haben willst. Wo (Javascript, PHP etc.) willst du was genau haben / erreichen?

Oder anders gefragt: Warum brauchst du den Value als PHP-Variable?

 

[Lawnmower]

So wie Du das erklärt hast, brauchst Du das nicht als PHP Variable.

 

[xep22]

also ich habe jetzt das hinbekommen :

HIER STEHT WAS

<select id='file' onchange='changefile("file")'>
    <option selected>download...</option>
    <option value='1'>file1</option>
    <option value='2'>file2</option>
    <option value='3'>file3</option>
</select>

<script type="text/javascript">
function changefile(ID){
    var file=document.getElementById(ID).value;
    document.write("<a href='php/dl.php?file=" + file + "'><button>download</button></a>");
    }
</script>

doch nach dem Auswählen kommt nicht einfach der button, wie es sein soll, sondern es verschwindet ALLES von der seite (das HIER STEHT WAS und select-dropdown) und nur der Button erscheint :/

 

[berto]

schau dir einmal die JS .append() methode an. mit der kannst du den button unten anhängen

 

[hYpac0w]

Versuchs mal hiermit aber geb dem <a> Element vorher noch id="link":

var select = document.getElementsByName("file")[0];
select.onchange = function(){
    var a = select.options[select.selectedIndex].value;
    document.getElementById("link").href = 'php/dl.php?file=' + a;
};

EDIT:
hab nicht gesehen, dass du dein select auch geändert hast, da musst du dann natürlich auch getElementById in der ersten Zeile verwenden.

<a href='#' id='link'><button>download</button></a>

kannst du ruhig auch im HTML lassen.

 

[kling1]

Du weißt anscheinend nicht was du tust.
Hier ein sauberes Javascript Beispiel
https://codepen.io/anon/pen/YjVJbE

<select name="file">
  <option selected value="0">download...</option>
  <option value="1">file1</option>
  <option value="2">file2</option>
  <option value="3">file3</option>
</select>
<a id="download" href="php/dl.php?file=0">download</a>

<script>
document.querySelector('select[name="file"]').addEventListener('change', event => {
  const file = event.target.value
  document.querySelector('#download').href = `php/dl.php?file=${file}`
})
</script>

 

[xep22]

ah danke