0

我在一个表格中有一行，其中有 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 数据库中与该工作匹配的内容而改变。然后它将显示与所选对象相关的成本。

我怎么能解决这个问题，因为我有点卡住了

4

2 回答 2

1

选择职位时首先创建 ajax 请求。在请求的成功回调中，将为从服务器的 JSON 响应中选择薪酬等级的选项生成 html

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);       
    });   
});

在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);

支付等级选择的jQuery更改处理程序以获取cost

$('select.jobGrade').change(function(){
     var cost=$(this).find(':selected').data('cost')
     $(this).parent().find('input.jobCost').val( cost);
})
于 2012-10-23T11:31:40.787 回答
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”，并将结果传递给成功属性中声明的函数；

于 2012-10-23T10:33:56.133 回答