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

Question

嘿，我在表单中有一个有效的下拉列表（使用 javascript），并希望将所选选项 (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>

Answer 1

你需要挂钩select框的onChange事件

HTML：

<form action="dropdown.php" method="POST">
  <select name='cat' id="cat_select" onChange="outputValue(this)">
    <option value='cat1'>cat1</option>
    <option value='cat2'>cat2</option>
    <option value='cat3'>cat3</option>
    <option value='cat4'>cat4</option>
  </select>
</form>
<div id="output"></div>

JS：

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

http://jsfiddle.net/X663R/

编辑：下面是 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>