Question

我有几个下拉列表，我想将它们的值发送到外部.php。问题是如何引用下拉列表中的值和使用下拉列表的ID。希望我已经解释得很好。

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

Answer 1

Ids是单数的，所以你不能用你选择的单个选择。有很多方法可以做到这一点，一种方法是传递事件并阅读目标。

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;

假设您的代码中的内容在您未显示的内容中有效。

Answer 2

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

从多个下拉列表中获取价值（选择选项）

2 个答案: