Получение значения из нескольких выпадающих списков (выберите опцию)

У меня есть несколько выпадающих списков, которые я хочу отправить их значение на внешний .php. Проблема заключается в том, как я могу ссылаться на значение из раскрывающегося списка и идентификатора, в котором выпадало меню. Надеюсь, я объяснил это достаточно хорошо.Получение значения из нескольких выпадающих списков (выберите опцию)

<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>

источник

2017-02-08 Mark James

ids являются единственными. – 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>

источник

2017-02-08 13:26:50 Shubhranshu

Кажется, что не идет на внешнюю страницу. –

Идентификаторы являются особыми, так что вы не можете выбрать индивидуальный один за то, что вы выбрали. Есть много способов сделать это, один из способов - передать событие и прочитать цель.

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>

Вы можете передать текущий объект с 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>

Или вы можете добавлять события без обработчика событий рядного

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>

Так чем бы вы изменили в console.log линии, чтобы быть

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

или

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

То есть если предположить, что вещество действует в вашем коде, который вам не отображаются.

источник

2017-02-08 13:29:46 epascarello

Это большое спасибо. Не могли бы вы объяснить, что такое console.log (selIndex, value); для. –

Вы не знаете, что такое console.log? https://developer.mozilla.org/en-US/docs/Web/API/Console – epascarello

Кажется, что я не могу отправить на внешнюю страницу после window.location.href = "externalPHPfile.php? w1 =" + x + " & w2 = "+ stuff; Функция sayHelloWorld() { var sel = this, selIndex = sel.selectedIndex, value = sel.options [selIndex] .value; console.log (selIndex, value); } –

Получение значения из нескольких выпадающих списков (выберите опцию)

ответ

Смежные вопросы