Javascript onchange有两个不同的下拉列表

javascript onchange with 2 different dropdown lists

本文关键字：两个 下拉列表 onchange Javascript      更新时间：2023-09-26

我是javascript编程新手。

我有一些。php代码，其中2个下拉列表(在同一表单中)由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>

我知道的斜体将不会捕获正确的值，但这是我现在在哪里…

如何获得一个操作URL与两个选定的值?因为这将在mysqli查询中使用，以显示来自实际选择

的数据

提前感谢……:)

目前，您正在通过JavaScript提交表单。如果选择在表单中，则在提交表单时将自动提交它们的值。你甚至不需要改变表单的动作。

所以，你可以生成一个普通的表单(包括提交按钮，如果你愿意的话)，它就会工作。然后，添加一点JavaScript使其自动提交。

下面的代码就是这样做的。javascript在主体中添加了一个类。这是一种基于是否启用JavaScript轻松更改样式的方法。在本例中，我使用它来隐藏提交按钮，该按钮仅在非javascript情况下才需要。

然后，绑定on更改处理程序(与您的处理程序不同)，以便在选择值时提交表单。通过给选择一个合适的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>

您可以将代码更新为

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();
   }

尝试这样做

<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'更改为处理程序函数

try this 

<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在函数之外，因为这两个变量只需要设置一次

相关文章：