使用 javascript 将下拉列表中的选定选项显示在框中 - Display a selected option from a drop down list into a box using javascript

Display a selected option from a drop down list into a box using javascript

嘿，我有一个表单（使用 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>

您需要挂接到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>