0

我正在制作一个表格，询问有关某人可以拥有多少个孩子以及他们的年龄的一些信息。目标是根据第一个选择的数量（孩子的数量）显示适合他们年龄的正确选择数量。

我有一个 PHP 文件，我在其中获取我的 JSON 文件的内容（问题所在），它根据 JSON 文件中的属性创建正确的输入（例如：“criteria_type”=“select”，PHP 将创建一个选择输入）。

PHP 代码如下所示：

if($grp_critere['crt_type'] == 'select') {

    $html_grp_criteres = '<select name="'. $grp_critere['crt_id'].'|scq_'.$grp_critere['question_key'].'" onchange="change_select_number">'.$html_grp_criteres.'</select>';
}

问题是我必须只显示我需要的选择，如果该人选择 3 个孩子，则会出现 3 个选择输入和年龄选择。

所以我为不同类型的选择创建了两种类型的“crt_type”：

  1. select_origin ：第一个更改下一个选择输入的编号

  2. select_update ：选择谁依赖于所选择的数字

在 Javascript 中使用 onchange 函数或 Jquery 中的 .change 有什么想法可以实现吗？

谢谢

4

1 回答 1

0

创建一个 div 作为额外选择元素的容器（我将给它“input_container”作为此示例的 id）。

我还给初始选择框（孩子的数量）一个“选择”的ID。

根据您的代码，#selection 在更改时已经触发了一个 change_select_number 函数，所以这就是您需要做的一切：

function change_select_number(){
    if($("#selection").val() > $("#input_container").children().length){ // if we need to add fields
        num = $("#selection").val() - $("#input_container").children().length; // find out how many elements we need to add
        for(i=0;i<num;i++){
            $("#input_container").append("<select style='display:block;' name='select_update["+$("#input_container").children().length+"]'><option>1<option>2</select>"); // add a select as a child of #input_container
        }
    }else if($("#selection").val() < $("#input_container").children().length){  // if we need to remove fields
        num = $("#input_container").children().length - $("#selection").val(); // find out how many elements to remove
        for(i=0;i<num;i++){
            $("#input_container select:last-child").remove(); // remove the last select from #input_container
        }
    }
}
于 2013-06-18T14:36:32.843 回答