Wert aus mehreren Dropdowns erhalten (Option auswählen)

Ich habe mehrere Dropdown-Elemente, die ich an eine externe .php senden möchte. Das Problem ist, wie kann ich den Wert aus dem Drop-Down-und ID, die Drop-down verwendet wurde verweisen. Hoffe, ich habe es gut genug erklärt.Wert aus mehreren Dropdowns erhalten (Option auswählen)

<html> 
    <head> 

     <script> 
     function sayHelloWorld() 
     { 
      var x = document.getElementById("myDropDown").selectedIndex; 
      window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff; 
     } 
     </script> 

    </head> 
    <body> 

    <?php 

    for($x=0;$x<4;$x++) 
    { 
         echo(" 
         <section> 
         <select id='myDropDown' onchange='sayHelloWorld()'> 
         <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
         <option id='' value='cows'>COWS</option> 
         <option id='' value='pigs'>PIGS</option> 
         <option id='' value='chicks'>CHICKS</option> 
         </select> 
         </section> 
         "); 
    } 

    ?> 
</body> 
</html>

Quelle

2017-02-08 Mark James

IDs sind Singular. – epascarello

<html> 
<head> 

    <script> 
    function sayHelloWorld(elem) 
    { 
     var x = elem.selectedIndex; 
     window.location.href = "externalPHPfile.php?w1=" + x + "&w2=" + stuff; 
    } 
    </script> 

</head> 
<body> 

<?php 

for($x=0;$x<4;$x++) 
{ 
        echo(" 
        <section> 
        <select id='myDropDown' onchange='sayHelloWorld(this)'> 
        <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
        <option id='' value='cows'>COWS</option> 
        <option id='' value='pigs'>PIGS</option> 
        <option id='' value='chicks'>CHICKS</option> 
        </select> 
        </section> 
        "); 
} 

?> 
</body> 
</html>

Quelle

2017-02-08 13:26:50 Shubhranshu

scheint nicht auf externe Seite zu gehen. –

Ids sind einzigartig, so dass Sie nicht eine einzelne, indem auswählen, was Sie ausgewählt. Es gibt viele Möglichkeiten, dies zu tun. Eine Möglichkeit besteht darin, das Ereignis zu übergeben und das Ziel zu lesen.

function sayHelloWorld(event) { 
 
    var sel = event.target, //the select that was active 
 
     selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
}

<section> 
 
    <select id='myDropDown1' onchange='sayHelloWorld(event)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select id='myDropDown2' onchange='sayHelloWorld(event)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

Sie können das aktuelle Objekt mit this

function sayHelloWorld(sel) { 
 
    var selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
}

<section> 
 
    <select id='myDropDown1' onchange='sayHelloWorld(this)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select id='myDropDown2' onchange='sayHelloWorld(this)'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

passieren Oder Sie können Ereignisse ohne die Inline-Event-Handler

hinzufügen

function sayHelloWorld() { 
 
    var sel = this, 
 
     selIndex = sel.selectedIndex, 
 
     value = sel.options[selIndex].value; 
 
    console.log(selIndex, value); 
 
} 
 

 
var sels = document.querySelectorAll('.selNav'); 
 
for (var i=0; i<sels.length;i++) { 
 
    sels[i].addEventListener("change", sayHelloWorld); 
 
}

<section> 
 
    <select class="selNav" id='myDropDown1'> 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section> 
 
<section> 
 
    <select class="selNav" id='myDropDown2' > 
 
    <option value='' disabled selected>CHOOSE&nbsp;ONE</option> 
 
    <option id='' value='cows'>COWS</option> 
 
    <option id='' value='pigs'>PIGS</option> 
 
    <option id='' value='chicks'>CHICKS</option> 
 
    </select> 
 
</section>

So, als Sie die console.log Linien ändern würde

window.location.href = "externalPHPfile.php?w1=" + selIndex + "&w2=" + stuff;

oder

window.location.href = "externalPHPfile.php?w1=" + encodeURIComponent(value) + "&w2=" + stuff;

, dass dieses Zeug sein wird unter der Annahme in Ihrem Code gültig ist, dass Sie werden nicht angezeigt.

Quelle

2017-02-08 13:29:46 epascarello

Das ist großartig, danke. Können Sie erklären, was die console.log (selIndex, Wert); ist für. –

Sie wissen nicht, was console.log ist? https://developer.mozilla.org/en-US/docs/Web/API/Console – epascarello

Scheint, ich kann nicht an externe Seite nach senden window.location.href = "externalPHPfile.php? w1 =" + x + " & w2 = "+ Zeug; Funktion sayHelloWorld() { var sel = dies, selIndex = sel.selectedIndex, Wert = sel.options [selIndex] .value; console.log (selIndex, Wert); } –

Wert aus mehreren Dropdowns erhalten (Option auswählen)

Antwort

Verwandte Themen