从多个下拉菜单中获取价值（select 选项）

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

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

Answer 2

ID 是单数的，因此您不能 select 根据您选择的 ID 来选择一个单独的 ID。有很多种方法，一种方法是传递事件并读取目标。

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;

这是假设您没有显示的内容在您的代码中有效。

从多个下拉菜单中获取价值（select 选项）

Getting value from multiple dropdowns (select option)

html

javascript

onchange

dropdown