Question

我在一张桌子上有一排，其中有3个字段如下：

Job            Pay Grade       Cost
<Select>       <Select>        <Calculation>

我有一个包含上述信息的SQL表，例如：

Job            Pay Grade       Cost
Techie         1               100
Techie         2               200
Engi           2               300
Engi           3               400
Engi           4               500

我需要做的是能够从下拉列表中选择一个作业，然后根据与SQL数据库中该作业匹配的内容，Pay Grade选择框将发生变化。然后它将显示与所选择的相关的成本。

我怎么能这样做，因为我有点卡住

Answer 1

您需要通过$ .ajax发布选择作业，然后在成功函数中填充下拉列表，如下所示：

function selectHandler (event, ui)
        {
        var id = event.target.id;
        $.ajax({
                type: "POST",
                url: "/php/get_quantity_type.php",
                dataType:"json",
                data: { ingridient : ui.item.value},
                success: function(data){$("#"+id+"_t").empty(); $.each(data,function(index,value) {$("#"+id+"_t").append('<option value="' + value + '">' + value + '</option>');})}
                });
        }

此示例从选择列表中获取材料的名称，通过$ ajax（）将其发布到php脚本，并将其写入新的下拉列表，该列表的id基于触发事件的id。如果您需要PHP代码，请询问：）

将作业列表绑定到上面的事件处理程序：

("#job_list").bind("select",selectHandler);

此代码将数据发布到“/php/get_quantity_type.php”，并将结果传递给在success属性中声明的函数;

Answer 2

首先在选择作业标题时创建ajax请求。如果请求的成功回调将生成html，用于从服务器的JSON响应中选择薪资等级的选项

的jQuery

$('select.jobTitle').change(function(){
    var $titleSelect=$(this);
    $.getJSON('processJobGrades.php', { jobTitle : $(this).val() }, function(response){
        var gradesOptionsHtml=''; 
        /* create options html from json response */
        $.each( response, function(i, item){
            gradesOptionsHtml+='<option value="'+item.grade+' data-cost="'+item.cost+'">'+item.grade+'</option>';
        });  
         $titleSelect.parent().find('select.jobGrade').html(gradesOptionsHtml);       
    });   
});

IN processJobGrades.php收到$_GET['jobTitle']。进行数据库查找并创建json以发回。

PHP

$outputArray=array();

/*in loop over DB data:*/
$outputArray[]= array( 'grade'=>$row['grade'], 'cost'=>$row['cost']);

/*Output final array as JSON*/
echo json_encode( $outputArray);

用于paygrade的jQuery更改处理程序选择获取cost

$('select.jobGrade').change(function(){
     var cost=$(this).find(':selected').data('cost')
     $(this).parent().find('input.jobCost').val( cost);
})

通过SQL动态更改下拉列表并计算总和？

2 个答案: