Question

我有一个HTML模式，其中包含带有选择标记和输入文本的表单。

选择选项是从这样的数据库中提取的。

<select id="select_1" name="select_1">
   <?php

访问数据库的代码

      $sql = $bdd->query('SELECT * FROM my_table;');
      while(@$fetch = $sql->fetch(PDO::FETCH_ASSOC)){
          $id = $fetch['id'];
          $name= $fetch['name'];
    ?>                                              
    <option id="<?php echo $id ; ?>"><?php echo $name; ?></option>
        <?php } ?>
</select>

<input type="text" id="input_1">

我想做的是，当我从select标记中选择一个选项时，我想在输入文本中从数据库中输出与该select选项相关的字段。

例如，让我们假设这样定义my_table并包含以下内容：

|      id      |      name      |      price      |
+--------------+----------------+-----------------+
|      1       |      A         |      500        |
|      2       |      B         |      1000       |

然后，我的选择标签将包含两个选项A和B：

<Option 1> A
<Option 2> B

当我选择选项1（A）时，我想在输入文本中输出其价格，因此它将包含500。

当我选择选项2（B）时，将在输入文本中输出1000。

在不使用POST提交表单且不关闭MODAL的情况下，该怎么办？

Answer 1

这就是我要做的

  <select id="select_1" name="select_1">
<?php
   $sql = $bdd->query('SELECT * FROM my_table;');
   while($fetch = $sql->fetch(PDO::FETCH_ASSOC)){ ?>                      
   <option id="opt-<?php echo $fetch['id']; ?>" data-price="<?php echo $fetch['price']; ?>" ><?php echo $fetch['name']; ?></option>
 <?php } ?>
  </select>
  <input type="text" id="input_1">

然后您可以使用（jQuery）

$('#select_1').on('change', function(){
     $('#input_1').val($(this).find('option:selected').data('price'));
});

实际上不需要AJAX，因为价格来自同一张桌子。您可以简单地将其存储为数据属性，然后在选择更改时访问它。

但是，请记住，它是option的属性，而不是select的属性。因此，您需要获取option的{{1}}。我们可以使用sudo选择器selected

:selected

$('#select_1').on('change', function(){
     $('#input_1').val($(this).find('option:selected').data('price'));
});

P.S。您实际上不应该以数字开头的ID。因此，我在其中添加了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select_1" name="select_1"> <option id="opt-0" data-price="" >Pick an Option</option> <option id="opt-1" data-price="500" >A</option> <option id="opt-2" data-price="1000" >B</option> </select> <input type="text" id="input_1">。

您也可以执行此操作（使用value属性）：

opt-

我真的看不到需要输入文字。因为当您提交此内容时，“提交”或“获取部分提交”中的<select id="select_1" name="select_1"> <?php $sql = $bdd->query('SELECT * FROM my_table;'); while($fetch = $sql->fetch(PDO::FETCH_ASSOC)){ ?> <option id="opt-<?php echo $fetch['id']; ?>" value="<?php echo $fetch['price']; ?>" ><?php echo $fetch['name']; ?></option> <?php } ?> </select>值将是select的值而不是其文本。

但是关于您在做什么的更多信息，谁能说。

Answer 2

因为已经使用GlobalEventHandlers和arrow function将值已加载并传递到选择选项值中。

select_1.onchange = (()=> {
  input_1.value = select_1.value
})

<select id="select_1">
   <option value="1" selected> A </option>
   <option value="2"> B </option>
</select>

<input type="text" id="input_1" value="1">

Answer 3

您可以使用javascript或带有AJAX请求的Jquery。

使用Jquery的示例：

$(document).on('change','#select_1',function({
 var value = $(this).value;

  //DO your ajax request here and send the value inside the data

})

在没有POST

3 个答案: