Question

当我在下拉列表中选择或选择产品时，如何获取product_rate的值并将其放入禁用的输入字段中。

<?php
    $con = mysqli_connect("localhost", "root", "", "dbselectedropdown");

    if (!$con) {
        die("Connection failed: " . mysqli_connect_error());
    }
?>
<html>
<head>
    <title>Selected Dropdown</title>
</head>
<body>
    <select name="product_select" id="product_select">
        <option>--SELECT--</option>
        <?php
           $query = mysqli_query($con, "SELECT * FROM tbselectedropdown");
            while ($row = mysqli_fetch_array($query)) {
                echo "<option>" .$row["product_name"]. "</option>";
            }
        ?>
    </select><br/><br/><br/><br/><br/><br/>
    <input type="text" name="product_inputfield" id="product_inputfield" disabled/>
</body>
<script>

</script>
</html>

Answer 1

首先，改进PHP：

$query = mysqli_query($con, "SELECT * FROM tbselectedropdown");
while ($row = mysqli_fetch_array($query)) {
  echo "<option value=" . $row["product_rate"] . ">" .$row["product_name"]. "</option>";
}

其次，添加脚本：

<script>
  var input = document.getElementById('product_select')
  input.addEventListener('change', function (e) {
    document.getElementById('product_inputfield').value = e.value
  })
</script>

或者，如果您使用的是jQuery：）

<script>
  $('#product_select').change(function () {
    $('product_inputfield').val($(this).val())
  })
</script>

Answer 2

如果您已经使用过，我建议您使用JQuery，它非常简单。收听任何更改，如果有更改，请将文本添加到已禁用的输入中。

＆＃13;

this.Invalidate()

＆＃13;

// create new function on change of select input
$('#product_select').change(function() {
  // create variable for product
  var product = $("#product_select").find(':selected').text();
  // create an input variable
  var input = $("#product_inputfield");
  
  // for testing you can output the select
  alert('Changed value: ' + product);
  
  // create the if statements
  if(product === 'acer') {
    input.val(1500); // change the value with your PHP
    // <?=$row['product_rate'];?>
  } else if( product === 'samsung') {
    input.val(3200);
  } else if( product === 'lenovo' ) {
    input.val(5300);
  }
});

＆＃13;

获取所选下拉列表的数据

2 个答案: