Javascript 如何从不同的下拉列表中获取选定值，并根据其ID将这些值填充到文本框中？

我正在使用PHP、MYSQL、一点JQUERY和JavaScript创建一个估价网站。在我的数据库中，我有3个表：

表车品牌：

表格型号：

表car_属性：

在用户页面中，我有不同的下拉列表，用户可以在其中选择品牌、型号、年份、里程、气缸等。一旦用户从下拉列表中做出所有选择并单击“评估”按钮，我希望仅基于car_属性的ID获取特定汽车的价格、价值和其他结果，并将这些值填充到文本框中。我使用javascript编写了代码，但它只返回onchange事件触发年份的记录。这是我到目前为止的代码

   <div class="col-xs-3">
      <label for="get_car_year">Year</label>
       <select name="get_car_year" class="form-control item_category" 
           id="get_car_year" onchange="getDetails()">
          <option value="0">-- Select --</option>

           <?php

            $query = "SELECT DISTINCT year, price_in_ead, current_rate_dollar 
              from car_attributes ORDER BY year DESC";

           $result = mysqli_query($con, $query);

           while($row = mysqli_fetch_row($result)) {
               echo "<option data-price_in_ead='$row[1]'  data- 
             rate_in_dollar='$row[2]'  value='$row[0]'> $row[0] </option>";
           }

           ?>

        </select>
    </div>

<script>

    function getDetails(){
        var price = $('#get_car_year').find(':selected').data('price_in_ead');
        var rate = $('#get_car_year').find(':selected').data('rate_in_dollar');
        $('#price_in_ead').val(price);
        $('#rate_in_dollar').val(rate);
    }

</script>

您可以像这样使用onchange，在HTML自定义数据中不要使用任何符号，它应该是简而言之的

不要像这个数据一样使用价格，像这个数据一样使用价格

---

下面是一个如何使用ajax的示例，您可以修改它以供使用

<form class=""  method="post">
<select class="" name="makes">
<!-- values are id of makes from DB -->
<option value="1">BMW</option>
<option value="2">Audi</option>
</select>

<select class="" name="model">
<!-- values are id of model from DB -->
<option value="1">M3</option>
<option value="2">Q7</option>
</select>

<select class="" name="year">
<!-- values are year of yeas from DB -->
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</form>

PHP

为安全起见，请转义数据

$query = "SELECT DISTINCT * FROM car_attributes WHERE cat_id='". (int)$_POST['makes'] ."' AND year='". (int)$_POST['year'] ."'";

执行查询并返回结果

echo json_encode($query);

---

改变年份后，现在发生了什么？。您是否在getDetails中使用console.log获取价格和费率？。还可以使用“价格”字段更新您的问题。当从下拉列表中选择一年时，它会显示价格和市场价值等值，但问题是如果用户然后选择例如里程，我需要为该字段和所有其他下拉列表创建一个onchange事件。当用户从下拉列表中做出所有选择并单击按钮时，我想在文本框中显示值。为什么不将带有当前汽车id的ajax发送到DB以获取全部信息？@Ivan这是我的想法，但现在我不知道如何做，你能给我一个电话吗example@EmanuelGoncalves检查我的答案。感谢您在@DroidDev分享您的答案，因为您缩短了答案的长度，它会起作用。但我的问题是，我不想使用onchange事件来获取单个下拉列表的值。我想一次选择所有下拉列表，因为我有多个下拉列表，并通过单击按钮或表单提交将其值填充到文本框中。您的代码易受SQL注入攻击。你应该使用事先准备好的陈述。不要逃避它@伊万：谢谢你的解决方案，也许正是我所需要的。我只想问几个问题，表单标签，我猜那是表单的ID，$'textarea'元素在哪里，我可以把文本框的ID放在哪里。最后一件事是，当您回显json_encode$query时，它会按原样回显查询，而不是从查询返回的值。我是否需要在数组中循环以返回查询结果？@EmanuelGoncalves您需要准备查询、执行并获取数据。更好地用于数据库连接。@EmanuelOnCalves yes form是表单的id，textarea是将放置输出的元素，yes值不会返回，因为我忘记为查询添加execute方法，如果您有任何问题，请告诉我

<div class="col-xs-3">
      <label for="get_car_year">Year</label>
       <select name="get_car_year" class="form-control item_category" 
           id="get_car_year" onchange="$('#price_in_ead').val($('#get_car_year').find(':selected').data('priceead'));$('#rate_in_dollar').val($('#get_car_year').find(':selected').data('ratedollar'));  ">
          <option value="0">-- Select --</option>

           <?php

            $query = "SELECT DISTINCT year, price_in_ead, current_rate_dollar 
              from car_attributes ORDER BY year DESC";

           $result = mysqli_query($con, $query);

           while($row = mysqli_fetch_row($result)) {
               echo "<option data-priceead='$row[1]'  data-ratedollar='$row[2]'  value='$row[0]'> $row[0] </option>";
           }

           ?>

        </select>
    </div>

<form class=""  method="post">
<select class="" name="makes">
<!-- values are id of makes from DB -->
<option value="1">BMW</option>
<option value="2">Audi</option>
</select>

<select class="" name="model">
<!-- values are id of model from DB -->
<option value="1">M3</option>
<option value="2">Q7</option>
</select>

<select class="" name="year">
<!-- values are year of yeas from DB -->
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</form>

$('form').submit(function(){
$.ajax({
type : 'POST',
url : 'url',
data :  $('#form').serialize(),
success: function(data){
  $('textarea').append(data.year)
}
})
})

$query = "SELECT DISTINCT * FROM car_attributes WHERE cat_id='". (int)$_POST['makes'] ."' AND year='". (int)$_POST['year'] ."'";

echo json_encode($query);