JS: SelectBox-Value abfragen, setzen, ändern, stylen(CSS)

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Donnerstag, 21. Juli 2005 um 16:15 Uhr (29/2005 Kalenderwoche)

geändert: Sonntag, 04. Februar 2024 um 20:04 Uhr (5/2024 Kalenderwoche)

Keywords: SelectBox Werte Values Optiontext getElementById selectedIndex

Kategorien: HTML, JavaScript,

Text:

Um den selektierten Wert oder Text einer Selectbox zu erhalten, benötigt man folgende Syntax. Ich kann sie mir nicht merken, daher dieser Artikel.
text = document.FORM.selBox2.options[document.FORM.selBox2.selectedIndex].text
value = document.FORM.selBox2.options[document.FORM.selBox2.selectedIndex].value;
document.FORM.VERANSTALTER.value = text;


//Auslesen und setzen kann man auch so:
document.getElementById("selBox").value = "einEintrag";


Siehe Quellcode:
Selectbox-Auswahl um einen Eintrag nach oben oder nach unten setzen und anschließend die Funktion "onchangeSubmit()" aufrufen.


Selectbox: Techdox-Artikel 2


zum Stylen siehe Selectbox: Techdox-Artikel 317

Quellcode:   

<style>
   /** s. Techdox-Artikel 317 */ 
</style>
<script>
/**
 * Wenn man die Selectbox auswählt, soll der Submit anschließend automatisch erfolgen.
 */
function onchangeSubmit() {
    let monatsAuswahlbox = document.getElementById('monatsAuswahlbox');
    let hiddenGewaehlterMonat = document.getElementById('hiddenGewaehlterMonat');
    let hiddenGewaehltesJahr = document.getElementById('hiddenGewaehltesJahr');
    let arrayMonatsAuswahlbox = monatsAuswahlbox.value.split('#');
    hiddenGewaehlterMonat.value = arrayMonatsAuswahlbox[0];
    hiddenGewaehltesJahr.value = arrayMonatsAuswahlbox[1];
    document.getElementById('formMonatsAuswahl').submit();
}//ENDE: function onchangeSubmit(...)

/**
 * Selectbox-Auswahl um einen Eintrag nach oben oder nach unten setzen
 * und anschließend die Funktion "onchangeSubmit()" aufrufen.
 */
function selectboxMonate(plusOrMinus) {
    let monatsAuswahlbox = document.getElementById('monatsAuswahlbox').selectedIndex;
    if (plusOrMinus === 'plus') {
        document.getElementById('monatsAuswahlbox').selectedIndex = monatsAuswahlbox + 1;
    } else {
        document.getElementById('monatsAuswahlbox').selectedIndex = monatsAuswahlbox - 1;
    }
    onchangeSubmit();
}//ENDE: function selectboxMonate(...)
</script>
<form action="index.php" style="display: inline;" id="formMonatsAuswahl" method="get">
    <button type="button" onclick="selectboxMonate(\'minus\');" 
            title="Einen Monat zurück blättern"
            >&#129184;&#xFE0F; &#10134;&#xFE0F;</button>
    <input type="hidden" name="gewaehlter_monat" id="hiddenGewaehlterMonat" value="">
    <input type="hidden" name="gewaehltes_jahr" id="hiddenGewaehltesJahr" value="">
    <select name="monatsAuswahlbox" id="monatsAuswahlbox" onchange="onchangeSubmit()">
        ' . $selectboxMonatsauswahl . '
    </select>
    <button type="button" onclick="selectboxMonate(\'plus\');" 
            title="Einen Monat weiter blättern"
            >&#10133;&#xFE0F; &#129185;&#xFE0F;</button>
</form>