基于从sql db动态加载的select选项值输入文本值

时间:2012-11-02 07:08:05

标签: php mysql forms

我有一个表单,它有一个select字段,可以从db结果查询中动态加载选项。这是代码的样子。之后看到说明文字输入?我需要代码来返回在productID下选择的项目的描述。我该怎么做?非常感谢所有回复。

    <div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1">';
        while($res= mysql_fetch_assoc($sql))
        {
        echo '<option value="'.$res['productID'].'">';
        echo $res['SKU'] ; 
        echo'</option>';
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <input type="text" name="description" value=""/>
    </div>
</div>

3 个答案:

答案 0 :(得分:1)

您可以通过两种方式执行此操作:

第一种方式是通过重定向具有$_GET参数的页面,该参数将包含产品ID:

<div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1" 
                      onchange="document.location=\'my-page.php?pid=\' + this.value">';
        while($res= mysql_fetch_assoc($sql))
        {
          echo '<option value="'.$res['productID'].'"';
          // LATER EDIT
            if(isset($_GET['pid']) && $_GET['pid'] == $res['productID'])
              echo 'selected="selected"';
          // END LATER EDIT
          echo '>';
          echo $res['SKU'] ; 
          echo'</option>';
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <?php
            if(isset($_GET['pid']) && is_numeric($_GET['pid'])) {
                $sql = mysql_query("SELECT description 
                                    FROM products 
                                    WHERE product_id='" . mysql_real_escape_string($_GET['pid']) . "'");
                $row = mysql_fetch_assoc($sql);
            }
        ?>
        <input type="text" name="description" value="<?=$row['description']?>"/>
    </div>
</div>

第二种方式是动态调用ajax并填充描述输入,而不刷新页面

// this is the JS code
$(document).ready(function(){
   $('#user').change(function(){
       $.POST("my-ajax-call-page.php",
               {pid: $("#user").val()},
               function(data){
                   $('input[name="description"]').val(data.description);
               }, "json");
   });
});

并且您的my-ajax-call-page.php应该是这样的:

<?php
    include("mysql-connection.php");

    $sql = mysql_query("SELECT description 
                        FROM products 
                        WHERE product_id='" . mysql_real_escape_string($_POST['pid']) . "'");
    $row = mysql_fetch_assoc($sql);

    echo json_encode("description" => $row['description']);
?>

您将在jQuery library website

上找到许多使用jQuery库的示例和文档

答案 1 :(得分:0)

<div class="row-fluid">
    <div class="span3">
        <label>SKU</label>
        <?php  echo '<select name="ITEM" id="user" class="textfield1" onchange="showDesc()">';
        $desHTML = "";
        echo "<option value='0'>Please select</option>"
        while($res= mysql_fetch_assoc($sql))
        {
        echo '<option value="'.$res['productID'].'">';
        echo $res["SKU"] ; 
        echo'</option>';
        $desHTML .="<div class'descBox' id='".$res['productID']."' style='display:none'>".$res['description']."</div>";
        }
        echo'</select>';

        ?>
    </div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <?php echo $desHTML; ?>
    </div>
</div>

现在创建一个js函数并调用onchange on select box。 Js函数提示:

$( “descBox。”)隐藏(); $( “#” + selectedItemValue).show();

如果您需要任何有关JS功能的帮助,请告诉我。

答案 2 :(得分:0)

您尚未向我们展示您的SQL查询,但我认为您有一个名为 description 的列,并且您也在查询中选择了此列。

那么,您可以使用jQuery将所选项目的描述插入到输入

<div class="row-fluid">
<div class="span3">
    <label>SKU</label>
    <?php  echo '<select name="ITEM" id="user" class="textfield1">';

    $js_array = array(); // This variable will contain your Javascript array with descriptions
    while($res= mysql_fetch_assoc($sql))
    {
    echo '<option value="'.$res['productID'].'">';
    echo $res['SKU'] ; 
    echo'</option>';

    // Fill your array with descriptions; ID of item will be the index of array
    $js_array[$res['productID']] = $res['description'];
    }
    echo'</select>';
    ?>
    <script>
    var description;
    <?php
    foreach($js_array as $description => $id)
    {
      echo("description['".$id."'] = '".$description."';\n");
    }
    ?>

    $(document).ready(function(){
      $('#user').change(function(){
        $("#description").val(description[$('#user').val()]);
      })
    });
    </script>
</div>
</div>
<div class="row-fluid">             
    <div class="span3">
        <label>Description</label>
        <input type="text" name="description" id="description" value=""/>
    </div>
</div>

请务必忘记将id属性添加到input type="text"