0

我想将所有数据放入输入框中，我将在选项框中选择我想要查看的成分的名称，例如在我的数据中我的 ingID 有 1、2、3 名称有土豆、胡萝卜、豆公斤有 3,4,5

如果我选择了土豆，则输入 ingID 中的值将是 1，输入名称的值将是土豆，输入公斤的值将是 5

这可能吗？

<input type="text"  id="ingID" name="ID">
<input type="text"  id="name" name="name">
<input type="text"  id="kilo" name="kilo">


<?php
    include "core/database/connect.php";
    $result = mysql_query("SELECT  ingID , name , kilo FROM ingredients");
    while($row = mysql_fetch_array($result)) {
        echo '<option value = " ' .$row["name"]. ' " >'.$row["name"].'</option>';
    }                   
?>
4

2 回答 2

1

您可以使用 jQuery 简单地做到这一点。我将每个选项的 value 属性设置为数据库中记录的 ID。但你也可以使用类似data-id.

我已经设置了一个 jsfiddle：http: //jsfiddle.net/8Pe9E/

HTML：

<div>ID: <input type="text"  id="ingID" name="ID"></div>
<div>Name: <input type="text"  id="name" name="name"></div>
<div>Kilo: <input type="text"  id="kilo" name="kilo"></div>
<div>Ingredients:
<select name="ingredients">
    <option value = "1" data-kilo="3" >potato</option>
    <option value = "2" data-kilo="4" >carrot</option>
    <option value = "3" data-kilo="5" >beans</option>
</select>
</div>

和 jQuery：

$('select[name="ingredients"]').change(function() {
    var opt = $(this).find('option:selected');
    $('input#ingID').val($(opt).val());
    $('input#name').val($(opt).text());
    $('input#kilo').val($(opt).data('kilo'));
});

选择字段当前是静态的，但您可以轻松更改它。

于 2013-09-30T09:24:43.490 回答
0

您也可以为此使用数据属性。

include "core/database/connect.php";
 $result = mysql_query("SELECT  ingID , name , kilo FROM ingredients");
 $select = "<select class='getData'>";
 while($row = mysql_fetch_array($result)) {
            $select .= '<option value = " ' .$row["name"]. ' "  data-kilo="'.$row["kilo"].'" data-name="'.$row["name"].'"  data-ingID="'.$row["ingID"].'">'.$row["name"].'</option>';
        }      
 $select .= "</select>";
 echo $select;

还有你的 jquery 代码。

$(document).ready(function(){

 $(".getData").bind('click',function(){
       var name = $(this).attr('data-name');
       var kilo = $(this).attr('data-kilo');
       var ingID = $(this).attr('data-ingID');

       $("#ingID").val(ingID);
       $("#name").val(name);
       $("#kilo").val(kilo);

 })
})
于 2013-09-30T09:21:48.417 回答