Question

我是javascript编程的新手。

我有一些.php代码，其中2个下拉列表（在同一个FORM中）由2个不同的mysqli查询填充，这没有任何问题。

我试图让javascript来处理下拉列表的选定部分，使用onchange，这只适用于一个下拉列表，我不知道如何解决这个问题。

这是使用一个下拉菜单的代码，它自动更新页面而不提交：

$chosen_location = $_GET['Lid']; 

$chosen_car = $_GET['Cid'];
?>

<script type="text/javascript">
  function changeDropDown(dropdown){

  var location = dropdown.options[dropdown.selectedIndex].value;
  *var car = dropdown.options[dropdown.selectedIndex].value;*

     document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
     document.getElementById("form1").submit();
   }
</script>

部分.php代码：

<select size="1" name="form_location_id" id="form_location_id" onchange='changeDropDown(this);'>
<option value = <?php echo ($location_id) ?> selected><?php echo ($location_name) ?></option>

<select size="1" name="form_car" id="form_car" onchange='changeDropDown(this);'>
<option value = <?php echo ($car_type_id) ?>><?php echo "" . ($car_class) . " - " . ($car_manufacturer) . " - " . ($car) . "" ?></option>

我知道的标记斜体不会捕捉到正确的值，但这就是我现在所处的位置......

如何获得包含所选值的操作网址？因为这将在mysqli查询中用于显示实际选择中的数据

提前致谢...：）

Answer 1

目前，您正在通过JavaScript提交表单。如果选择位于表单内，则在您提交表单时将自动提交其值。您甚至不必更改表单的操作。

所以，你可以生成一个普通的表格（包括提交按钮，如果你愿意的话），它会起作用。然后，添加一点JavaScript酱，使其自动提交。

下面的代码就是这样。 JavaScripts向正文添加了一个类。这是一种基于启用或不启用JavaScript轻松更改样式的方法。在这种情况下，我使用它来隐藏提交按钮，这只在非JavaScript情况下才需要。

然后，我绑定on change change处理程序，与你的不同，在选择值时提交表单。通过选择适当的name，它们的值将自动按预期添加。

注意事件处理程序如何通过代码绑定。您不必在HTML中对JavaScript的任何调用进行硬编码，因此您可以保持HTML清晰和分离（可读性！）。

// Bind to load event of the window. Alternatively, put the script at the end of the document.
window.addEventListener("load", function() {

  // Indicate that JavaScript works. You can use this to style the document, for instance
  // hide the submit button, if the form is automatically submitted on change..
  document.body.classList.add("js");

  // With JavaScript, you can automatically submit the form, but you still don't have to modify it.
  var theform = document.getElementById("theform");
  var selects = document.querySelectorAll("#theform select");

  for (var i = 0; i < selects.length; ++i) {

    selects[i].addEventListener("change",
      function() {
        alert("submitting now");
        theform.submit();
      });

  }
});

.js button[type="submit"] {
  display: none;
}

<!-- Just a form with selects is enough. You don't even have to have JavaScript to post this. -->
<form id="theform" action="test.php" method="get">
  <select name="Lid">
    <option>Example...</option>
    <option>Use PHP,</option>
    <option>to fill these.</option>
  </select>
  <select name="Cid">....</select>
  <button type="submit">Post</button>
</form>

Answer 2

您可以将代码更新为以下

function changeDropDown(){
   var elLocation = document.getElementById('form_location_id');
   var elCar = document.getElementById('form_car');
   var location = elLocation.options[elLocation.selectedIndex].value;
   var car = elCar.options[elCar.selectedIndex].value;

   document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
   document.getElementById("form1").submit();
   }

Answer 3

尝试这样做

<script>
  // get select elements
  var form_location_id = document.getElementById('form_location_id');
  var form_car = document.getElementById('form_car');

  // on change
  form_location_id.addEventListener('change', changeDropDown1);
  form_car.addEventListener('change', changeDropDown2);
</script>

将'changeDropDown1'和'changeDropDown2'更改为处理函数

Answer 4

试试这个

<script type="text/JavaScript">

var dropdownLocation = document.getElementById("form_location_id");
var dropdownCar = document.getElementById("form_car");

function changeDropDown() {

    var location = dropdownLocation.options[dropdownLocation.selectedIndex].value;
    var car = dropdownCar.options[dropdownCar.selectedIndex].value;

    document.getElementById("form1").action = "test.php?Lid=" + location + "&Cid=" + car;
    document.getElementById("form1").submit();

}
</script>

dropdownLocation和dropdownCar不在节省时间的函数之外，因为这2个变量只需要设置一次

javascript onchange有2个不同的下拉列表

4 个答案: