创建下拉列表,使用选择从数据库自动填充

时间:2012-08-06 19:07:15

标签: php jquery dynamic drop-down-menu

我正在编写保险表格:您选择您拥有的公司,然后它将从数据库中访问电话号码和其他值,并填写下面的表格。然后他们只需要输入他们需要的信息。

$hostname = "";
$username = "";
$password = "";
$database = "";

mysql_connect($hostname,$username,$password);
@mysql_select_db($database) or die( "Unable to select database");

//getFN();
function getFN()
{
    $query = "SELECT first FROM contacts";
    $FNresult = mysql_query($query); 


    $dropdown = "<select name='contacts'>";

    while( $row = mysql_fetch_assoc($FNresult) )
    {
        $dropdown .= "\r\n<option value='{$row['first']}'>{$row['first']}</option>";
        echo getLN();
        //$last .="\r\n<option value='{$row['last']}'>{$row['last']}</option>";
        //echo $last;
    }

    $dropdown .= "\r\n</select>";

    echo $dropdown;
}

// Get last name
function getLN()
{
    $query = "SELECT last FROM contacts";
    $LNresult=mysql_query($query);

    $last;
    while($row = mysql_fetch_assoc($LNresult))
    {
        $last = "{$row['last']}";
    }
    echo $last;
} //end getLN


mysql_close();
?>

<select name="fdsfd" onchange="document.getElementById('first').value = this.value">
    <!-- <option value="<?//php echo $first; ?>"></option>-->
</select>

<form action="insert.php" method="post">
    First Name: <input type="text" id="first" value=""><br>
    Last Name: <input type="text" id="last"><br>
    Phone: <input type="text" id="phone"><br>
    Mobile: <input type="text" id="mobile"><br>
    Fax: <input type="text" id="fax"><br>
    E-mail: <input type="text" id="email"><br>
    Web: <input type="text" id="web"><br>
    <input type="Submit">
</form>

1 个答案:

答案 0 :(得分:-2)

您需要结合使用AJAX和PHP,并根据服务器的响应(DHTML)动态修改页面源。

首先,您需要了解AJAX:SO question on how AJAX works

其次,您需要了解jQuery:tutorial here

现在,

您需要一种方法让javascript唯一地标识您的元素。给它一个id属性,以及你给它的名字。

一旦元素具有id属性,jQuery就可以使用ID选择器

访问它
$("#[id]")...

您的后台脚本应从您的下拉列表中获取唯一标识符,从您的数据库中获取数据并填充JSON编码的数组。

然后您可以填充表单元素。

<?php
// background script

// retrieve data based on $_POST variable, set to $returnArray

/****************************
 * the structure of returnArray should look something like
 *     array(
 *         'first' => firstName,
 *         'last' => lastName,
 *         etc.
 *     )
 */

echo json_encode($returnArray);

=========================

<!-- javascript on client-side -->
<script language="javascript" type="text/javascript">
    $("#dropdown").on('change', function() {
        $.post("backgroundScript.php", {
                uid: $(this).val()
            } function(data) {
               $("#first").val(data.first);
               $("#last").val(data.last);
               // etc.
            }, 'json'
        );
    });
</script>