选中下拉列表时,自动生成包含数据库值的文本框

时间:2014-09-15 19:00:07

标签: php jquery mysql

我有两个相互依赖的drop drown,第二个下拉值填充选择第一个下拉值时,当我选择第二个下拉列表时,它必须使用存储在数据库中的值填充文本框。

我的下拉列表正在运行但我没有在选择第二个下拉列表时填充文本框。

这是我的代码

jquery的

<script>

    function showItems(sel) {
        var cat_id = sel.options[sel.selectedIndex].value;  
        $("#output1").html( "" );

        if (cat_id.length > 0 ) {

         $.ajax({
                type: "POST",
                url: "fetch_items.php",
                data: "cat_id="+cat_id,
                cache: false,
                beforeSend: function () {
                    $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
                },
                success: function(html) {    
                    $("#output1").html( html );
                }
            });
        }
    }
    </script>

表(下拉)

<div class="formSep">

<?php
$sql2 = "SELECT * FROM item_category";
$query2 = mysql_query($sql2);
?>

<select name="category" onChange="showItems(this);">
  <option value="">Item Category</option>
<?php while ($rs2 = mysql_fetch_array($query2)) { ?>
  <option value="<?php echo $rs2["item_id"]; ?>"><?php echo $rs2["name"]?></option>
<?php } ?>
</select>




 <div id="output1"></div>

fetch_items.php

<?php

error_reporting(0);
include("../connect.php");
include("../admin_auth.php"); 

$cat_id = ($_REQUEST["cat_id"] <> "") ? trim( addslashes($_REQUEST["cat_id"])) : "";
if ($cat_id <> "" ) { 
$sql = "SELECT * FROM items where category=".$cat_id."";
$count = mysql_num_rows( mysql_query($sql) );
if ($count > 0 ) {
$query = mysql_query($sql);
?>

<select name="items">
    <option value="">Items</option>
    <?php while ($rs = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $rs["name"]; ?>"><?php echo $rs["name"]; ?></option>
    <?php } ?>
</select>

<?php 
    }
}
?>

在文本框中我应该从items表中获取该查询的值

$m1 = "select * from order_line_items where order_id=".$order_id."";
                   $result = mysqli->query($m1);

                   $row = $result->fetch_array(MYSQLI_ASSOC);

请建议我如何生成文本框。

1 个答案:

答案 0 :(得分:0)

这是一个很难帮助你的尝试,而且我做了很多假设。

FIDDLE符合您提到的一般概念。

我假设在同一页面上为php代码填充了第一个选项列表。

第二个选项列表是在从第一个列表中选择之后生成的,然后是对db(假设)的AJAX调用。

然后在从第二个列表中选择之后,进行另一个返回json数据的ajax调用。该数据被解析和分发。

也许这会给你一个开始。

很多JS

var vartopass;

$('.option1').append("<option id='africa'>Africa</option><option id='india'>India</option><option id='namerica'>North America<option>");

$('.option1').on('change', function(){

    if( $(".option1 #africa").prop('selected') === true )
       {
       $('.option2').append("<option id='elephant'>Elephant</option><option id='rhinoceros'>Rhinoceros</option><option id='giraffe'>Giraffe</option>");
       $('.option2').css('visibility', 'visible');
       }

    if( $(".option1 #india").prop('selected') === true )
      {
       $('.option2').append("<option id='tiger'>Tiger</option><option id='waterbuffalo'>Water Buffalo</option><option id='snowleopard'>Snowleopard</option>");
       $('.option2').css('visibility', 'visible');
       }

    if( $(".option1 #namerica").prop('selected') === true )
      {
       $('.option2').append("<option id='deer'>Mule Deer</option><option id='elk'>Elk</option><option id='moose'>Moose</option>");
       $('.option2').css('visibility', 'visible');
       }        
});

$('.option2').on('change', function(){
    vartopass = $('.option2').children(":selected").attr("id");
    console.log( vartopass );
/*
This is a hypothetical data return from an ajax call that takes the data from your option list, passes it to a php file, the server returns JSON data, and it is parsed and loaded into divs.

$.ajax({
            type: "POST",
            url: "gogetthestuff.php",
            data: {animal: vartopass}
            .done(function(data){
                    $('.putmehere1').val(result.height);
                    $('.putmehere1').val(result.weight);
                                 });
        });
*/



//Hypothetical callback from JSON array returned by AJAX:
var animals = [
    {
    "elephant": {
        "height": "126",
        "weight": "6000"
    },
    "rhinocerus": {
        "height": "88",
        "weight": "4000"
    },
    "giraffe": {
        "height": "400",
        "weight": "2000"
    },
    "tiger": {
        "height": "44",
        "weight": "1000"
    },
    "waterbuffalo": {
        "height": "128",
        "weight": "5000"
    },
    "snowleopard": {
        "height": "38",
        "weight": "600"
    },
    "deer": {
        "height": "98",
        "weight": "180"
    },
    "elk": {
        "height": "188",
        "weight": "2000"
    },
    "moose": {
        "height": "288",
        "weight": "5000"
    }
}
];

$('.putmehere1').html( "<br />Animal height: " + 
                        eval( 'animals[0].' + vartopass + '.height' ) + 
                        " inches" );
$('.putmehere2').html( "<br />Animal weight: " + 
                        eval( 'animals[0].' + vartopass + '.weight' ) + 
                        ' pounds' );

});