使用javascript将下拉列表中的选定选项显示到框中

嘿，我有一个使用javascript的工作DrowDown列表，希望将所选选项cat的输出显示在一个框中作为id

cat和id都在同一个表内核中

谁能帮帮我吗

<form action="dropdown.php" method="POST">
  <?php
    $sth = $dbhandle->prepare("SELECT cat FROM kernel");
    $sth->execute();
    $results = $sth->fetchAll(PDO::FETCH_ASSOC);
    echo "<select name='cat'>";
    foreach($results as $row) {
      echo "<option value='" . $row['cat'] . "'>" . $row['cat'] . "</option>";
    }    
    echo "</select>";
  ?>
</form>

您需要钩住选择框的onChange事件

HTML:

编辑：下面是包含php的代码

<form action="dropdown.php" method="POST">
  <?php
    $sth = $dbhandle->prepare("SELECT cat FROM kernel");
    $sth->execute();
    $results = $sth->fetchAll(PDO::FETCH_ASSOC);
    echo "<select name='cat' id='cat_select' onChange='outputValue(this)'>";
    foreach($results as $row) {
      echo "<option value='" . $row['cat'] . "'>" . $row['cat'] . "</option>";
    }    
    echo "</select>";
    echo "<input type='text' id='output' name='output' />";
  ?>
</form>
<script>
function outputValue(item){
    document.getElementById('output').value = item.value;
}
</script>

---

您是使用jQuery查看更改事件还是需要香草javascript查看onChange事件？我需要香草javascripti我在他的个人资料中找不到想要的选项这是我用于OnCharge事件回显的内容；但是它什么都不做还有没有办法把它显示在文本框中？请问你的意思是像一个输入框？您需要将javascript添加到页面和输出元素中。这里有一个更新的JSFIDLE，使用文本类型的输入。很抱歉，请您使用我正在使用的代码来完成，因为我无法使用我的代码。什么也没发生：

function outputValue(item){
    document.getElementById('output').innerHTML = item.value;
}

<form action="dropdown.php" method="POST">
  <?php
    $sth = $dbhandle->prepare("SELECT cat FROM kernel");
    $sth->execute();
    $results = $sth->fetchAll(PDO::FETCH_ASSOC);
    echo "<select name='cat' id='cat_select' onChange='outputValue(this)'>";
    foreach($results as $row) {
      echo "<option value='" . $row['cat'] . "'>" . $row['cat'] . "</option>";
    }    
    echo "</select>";
    echo "<input type='text' id='output' name='output' />";
  ?>
</form>
<script>
function outputValue(item){
    document.getElementById('output').value = item.value;
}
</script>