在下拉更改事件从数据库加载数据并填充文本框答案

【问题标题】：on dropdown Change event load data from database and fill text box在下拉更改事件从数据库加载数据并填充文本框
【发布时间】：2014-01-10 17:21:04
【问题描述】：

我有一个简单的下拉列表，其值来自 DB。我正在这样做

$query = "SELECT id,location_name FROM misc_location";
if ( $result = mysql_query($query) ) {
    $selectLoco = "<select name='selectLoco' id='selectLoco'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]''> $row[1] </option>";
     }
     $selectLoco .= "</select>";
}

但现在我在下拉列表下方有一个文本框。所以当用户选择一个下拉项时，我需要拉出一个与所选项目对应的值并显示在文本框中。

表：misc_location

id   location_name   time
1    Ben             7.00 am
2    Cat             8.00

位置：下拉用户选择 Ben ，下面的文本框应显示 7.00

【问题讨论】：

标签： javascript php jquery mysql drop-down-menu

【解决方案1】：

您需要为您的选择分配一个事件监听器：

<select name='selectLoco' id='selectLoco' onchange="$('#textboxid').val(this.value);">

并更正您的 php.ini 文件。您在输出选项值的地方有两次引号。您可能还想在加载时更新值。

这是jsfiddle link

还有一个更好的例子：

<select name='selectLoco' id='selectLoco' onchange="updateValue();">
    <option value="123">aaa</option>
    <option value="456">bbb</option>
</select>
<input type="text" id="textboxid" />

<script type="text/javascript">
//the function that takes care of the updating
function updateValue()
{
    $('#textboxid').val($('#selectLoco').val());
}

//update once the page has loaded too
$(document).ready(function () {
    updateValue();
});
</script>

【讨论】：

【解决方案2】：

我得到了一个解决方法，基于使用 ajax + json 的答案，我是如何做到的

jquery

$('#selectLoco').on('change', function(){
    selectLoco = $('#selectLoco option:selected').val(); // the dropdown item selected value
    $.ajax({
        type :'POST',
        dataType:'json',
        data : { selectLoco : selectLoco },
        url : 'getresult.php',
        success : function(result){
         $('#textBoxIwant).val(result['WeekDaySm']);// json result      
        }
    });

});

PHP

<?php 
require_once ('../config/db.config.php');

$selectLoco = $_POST['selectLoco'];
$query = "SELECT * FROM misc_location WHERE id = '$selectLoco' ";

$result = mysql_query($query);
$row = mysql_fetch_assoc($result);
echo json_encode($row);
 ?>

【讨论】：

【解决方案3】：

你能试试这个吗，使用onchange触发事件你可以调用javascript函数并填充值。 myvalue 你可以替换你的文本框ID。

  $selectLoco = "<select name='selectLoco' id='selectLoco'  onchange='UpdateTextbox(this)'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]'> $row[1] </option>";
     }
     $selectLoco .= "</select>";

  echo '<input id="myvalue" type="text">';

javascript:

 function UpdateTextbox(d){  
          document.getElementById('myvalue').value = d.value;
 }

如果使用Jquery来实现：

   $(function(){
    $('#selectLoco').change(function(){
       $("#myvalue").val($(this).val());
     });
   });

【讨论】：

document.getElementById('myvalue').value = d.value ，但在此我如何从 db 表中加载值
在 onchange='UpdateTextbox(this)' 中传递this，它使用选定的下拉值

【解决方案4】：

在选择中添加一个自定义数据属性来表示时间，然后用jQuery访问它。

$query = "SELECT id,location_name FROM misc_location";
if ( $result = mysql_query($query) ) {
    $selectLoco = "<select name='selectLoco' id='selectLoco'>";
     while ($row = mysql_fetch_row($result) ) {
        $selectLoco .= "<option value='$row[0]' data-time='$row[2]'> $row[1] </option>";
     }
     $selectLoco .= "</select>";
}

下面的jquery：

$('#selectLoco').on('change',function(e){
    $('#textboxid').val($(this).children(':selected').attr('data-time'))
});

JSfiddle here

【讨论】：