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 属性を DB からのレコードの 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

そのために data 属性を使用することもできます。

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 に答える