mehrere selectFields mit Javascript

    Hallo,


    hier ist mein HTML-Code:


    <div >

    <form>

    <label>

    <select multiple name="multi" id="Feld1">


    <option > Hecht im Teigmantel </option>

    <option value="Forelle"> Forelle Blau </option>

    <option value="Lachs"> Kanadischer Lachs </option>

    <option value="Zander"> Zander in Weißwein </option>

    </select>

    </label>

    <select multiple id="Feld2">

    <option value='Nil'>Select Print Size</option>

    <option value = '5x7'>5x7</option>

    <option value = '6x8'>6x8</option>

    </select>

    <div class="multicheck"> <input type="button" value ="Submit"></div>

    </form>



    und mit der Beispiel unten zeige ich, was ich erhalten will:


    - "Forelle Blau" und "Lachs" von der ersten Feld werden ausgewählt und gleichzeitig werden "5/7" der zweite Feld selektiert.

    - Sollte es so erscheinen:

    Feld1: Forelle Feld2: 5/7
    Lacs


    Können Sie mir bitte helfen, den Javascript- Code dafür zu schreiben?


    danke

    Danke Arne,


    Aber was du gemacht hast, konnte ich es schon machen.


    wie du auf mein code hier schauen kannst, kann ich schon alle werte mit javascript auslesen.


    Aber ich will dass die ausgabe in separaten Felder kommen:

    Beispiel:

    Felder1: Lachs Felder2: 5*7

    Forelle

    <body>


    <h2>Select mit mehreren Optionen</h2>


    <div class="formitem">

    <table>

    <tr>

    <form>

    <td>

    <select multiple name="multi" id="Feld1">


    <option > Hecht im Teigmantel </option>

    <option value="Forelle"> Forelle Blau </option>

    <option value="Lachs"> Kanadischer Lachs </option>

    <option value="Zander"> Zander in Weißwein </option>

    </select>

    </td>

    <td>

    <select multiple id="Feld2">

    <option value='Nil'>Select Print Size</option>

    <option value = '5x7'>5x7</option>

    <option value = '6x8'>6x8</option>

    </select>

    </td>

    <div class="multicheck"> <input type="button" value ="Submit"></div>

    </form>

    </tr>

    <tr>

    <th> Felder1 </th>

    <th> Felder2 </th>

    </tr>

    </table>

    </div>



    <div class="multi-msg" id ="multi-msg"></div>

    <script language="JavaScript" type="text/javascript">

    document.querySelector(".multicheck").onclick = function () {

    var result = [];

    var options = document.querySelectorAll("option") ;

    var opt;

    for (var i=0, iLen=options.length; i<iLen; i++) {

    opt = options[i];

    if (opt.selected) {

    result.push(opt.value || opt.text);

    }

    }

    document.getElementById("multi-msg").innerHTML = result;

    }


    </script>

    Das hast Du vorher ja nicht erwähnt!


    Denn gib den <th> ein passendes <td> mit entsprechender id und sprech die über getElementById() dirket an.

    Wenn Du das JS selber gemacht hast und verstehst, was da passiert, sollte das kein Problem sein.

    Hallo,

    bisher habe noch kein Ergebnis gefunden. Kann Jemanden mir helfen?


    Das ist was ich bisjetzt schaffe aber ich will, dass beim Selektion von Category 1 und Status 1 bzw. Status 2, dass es so ausgegeben wird:

    Category: Category 1

    Status: Status 1/ Status 2


    Mein Code:


    <!DOCTYPE html>

    <html>

    <head>

    <title>Formular</title>

    </head>

    <script>

    function filter(){

    var options = document.querySelectorAll("option");

    var thead = document.querySelectorAll("th");

    var result = " ";

    var th = "";

    var ausgabe = " ";


    document.getElementById("test"),innerHTML= " ";


    for (var i =0; i<options.length; i++){

    if(options[i].selected){

    result += options[i].value + " / ";


    }

    }

    for (var j =0; j<thead.length; j++){

    th += thead[j].innerHTML + ":" + result + "<br>";

    }


    document.getElementById("test").innerHTML = th;

    }

    </script>

    <body>

    <div>

    The List's option is here:

    <p id="test"></p>

    </div>

    <div>

    <table>

    <tr>

    <form>

    <td>

    <select name="data[PartFilter][category_id][]" multiple="multiple" id="PartFilterCategoryId">

    <option>Category 1</option>

    <option>Category 2</option>

    <option>Category 3</option>

    </select>

    </td>

    <td>

    <select name="data[PartFilter][status_id][]" multiple="multiple" id="PartFilterStatusId">

    <option>Status 1</option>

    <option>Status 2</option>

    <option>Status 3</option>

    </select>

    </td>

    <td>

    <select name="data[PartFilter][Information_id][]" multiple="multiple" id="PartFilterInformationId">

    <option>Information 1</option>

    <option>Information 2</option>

    <option>Information 3</option>

    </select>

    </td>

    </form>

    </tr>

    <tr>

    <th>Category</th>

    <th>Status</th>

    <th>Information</th>

    </tr>

    </table>

    <input type="submit" value="Filter" onclick="filter()">

    </div>

    </body>

    </html>

    jeder td (tableData) gehört zu einer th (thead).

    Daher wenn etwas in td selektiert wird, dann sollte es mit der Name seine zugehörigen thead.


    Bsp: Category 1 ist in td selektiert dann ausgabe: Category: Category 1

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden