LAYUI前端框架+PHP后端中select下拉框的使用

1.在common.php后端中编写获取下拉框数据源信息的方法，也可以通过ajax从后端获取

//获取班次信息
function get_shift($id=0)
{
    $shift_array = ['白班','夜班','项目现场休息（非自主）','路工','请假/休息'];
    if($id==0){
        return $shift_array;
    }
    else{
        $news_array=[];
        foreach($shift_array as $key => $value){
            if($key>0){
                $news_array[]=array(
                    'id'=>$key,
                    'title'=>$value,
                );
            }
        }
        return $news_array;
    }
}

//获取班次信息
function shift_name($shift=0)
{
    $shift_array = get_shift();
    return $shift_array[$shift];
}

2.使用volist循环增加option的值

    <tr>
            <td class="layui-td-gray-2">班次<span style="color: red">*</span></td>
            <td>
                {if ($id == 0) } 
                <select id="shift" name="shift" lay-verify="required" lay-reqText="请选择班次" lay-filter="shiftFilter">
                    {volist name=":get_shift()" id="vo"}
                    {gt name="$key" value=""}
                    <option value="{$key}">{$vo}</option>
                    {/gt}
                    {/volist}
                </select>
                {else}
                <select id="shift" name="shift" lay-verify="required" lay-reqText="请选择班次" lay-filter="shiftFilter">
                    {volist name=":get_shift()" id="vo"}
                    {gt name="$key" value=""}
                    <option value="{$key}" {$key == $detail.shift ? 'selected' : ''}>{$vo}</option>
                    {/gt}
                    {/volist}
                </select>
                {/if}
            </td>
        </tr>

3.当选中下拉的值时在js中设置表单中其他组件是否可见

        //选中班次设置录入信息是否可见
        form.on('select(shiftFilter)',function (data) {
            if(data.value == "4"){
                $(".taskVisible").hide(); 
                $(".statusVisible").hide(); 
                $(".actualVisible").hide(); 
                $(".personalVisible").hide(); 
                $(".worksVisible").hide(); 
                $(".outsideVisible").hide(); 

                $('[name="task_name"]').removeAttr('lay-verify');
                $('[name="task_status"]').removeAttr('lay-verify');
                $('[name="actual_work_hours"]').removeAttr('lay-verify');
                $('[name="personal_plan_hours"]').removeAttr('lay-verify');
                $('[name="works"]').removeAttr('lay-verify');
                $('[name="is_outside_contract_hours"]').removeAttr('lay-verify');
            }
            else if(data.value == "2"){
                $(".taskVisible").hide(); 
                $(".worksVisible").hide(); 
                $(".outsideVisible").show(); 
                $(".statusVisible").show(); 
                $(".actualVisible").show(); 
                $(".personalVisible").show();
                $('[name="task_name"]').removeAttr('lay-verify');
                $('[name="works"]').removeAttr('lay-verify');
                $('[name="is_outside_contract_hours"]').attr('lay-verify');
                $('[name="task_status"]').attr('lay-verify','required');
                $('[name="actual_work_hours"]').attr('lay-verify','required');
                $('[name="personal_plan_hours"]').attr('lay-verify','required');

            }
            else if(data.value == "3"){
                $(".statusVisible").hide(); 
                $(".taskVisible").show();  
                $(".actualVisible").show(); 
                $(".personalVisible").show(); 
                $(".worksVisible").show(); 
                $(".outsideVisible").show(); 
                $('[name="task_status"]').removeAttr('lay-verify');
                $('[name="task_name"]').attr('lay-verify','required');
                $('[name="actual_work_hours"]').attr('lay-verify','required');
                $('[name="personal_plan_hours"]').attr('lay-verify','required');
                $('[name="works"]').attr('lay-verify','required');
                $('[name="is_outside_contract_hours"]').attr('lay-verify','required');
            }
            else{
                $(".taskVisible").show(); 
                $(".statusVisible").show(); 
                $(".actualVisible").show(); 
                $(".personalVisible").show(); 
                $(".worksVisible").show(); 
                $(".outsideVisible").show(); 

                $('[name="task_name"]').attr('lay-verify','required');
                $('[name="task_status"]').attr('lay-verify','required');
                $('[name="actual_work_hours"]').attr('lay-verify','required');
                $('[name="personal_plan_hours"]').attr('lay-verify','required');
                $('[name="works"]').attr('lay-verify','required');
                $('[name="is_outside_contract_hours"]').attr('lay-verify','required');
            }
        });

4.编辑页面时更加下拉框的初始信息设置表单内其他组件是否可见

        if($('#shift').val() == "4"){
                $(".taskVisible").hide(); 
                $(".statusVisible").hide(); 
                $(".actualVisible").hide(); 
                $(".personalVisible").hide(); 
                $(".worksVisible").hide(); 
                $(".outsideVisible").hide(); 

                $('[name="task_name"]').removeAttr('lay-verify');
                $('[name="task_status"]').removeAttr('lay-verify');
                $('[name="actual_work_hours"]').removeAttr('lay-verify');
                $('[name="personal_plan_hours"]').removeAttr('lay-verify');
                $('[name="works"]').removeAttr('lay-verify');
                $('[name="is_outside_contract_hours"]').removeAttr('lay-verify');
            }
        else if($('#shift').val() == "2"){
            $(".taskVisible").hide(); 
            $(".worksVisible").hide(); 
            $(".outsideVisible").show(); 
            $(".statusVisible").show(); 
            $(".actualVisible").show(); 
            $(".personalVisible").show();
            $('[name="task_name"]').removeAttr('lay-verify');
            $('[name="works"]').removeAttr('lay-verify');
            $('[name="is_outside_contract_hours"]').attr('lay-verify');
            $('[name="task_status"]').attr('lay-verify','required');
            $('[name="actual_work_hours"]').attr('lay-verify','required');
            $('[name="personal_plan_hours"]').attr('lay-verify','required');

        }
        else if($('#shift').val() == "3"){
            $(".statusVisible").hide(); 
            $(".taskVisible").show();  
            $(".actualVisible").show(); 
            $(".personalVisible").show(); 
            $(".worksVisible").show(); 
            $(".outsideVisible").show(); 
            $('[name="task_status"]').removeAttr('lay-verify');
            $('[name="task_name"]').attr('lay-verify','required');
            $('[name="actual_work_hours"]').attr('lay-verify','required');
            $('[name="personal_plan_hours"]').attr('lay-verify','required');
            $('[name="works"]').attr('lay-verify','required');
            $('[name="is_outside_contract_hours"]').attr('lay-verify','required');
        }
        else{
            $(".taskVisible").show(); 
            $(".statusVisible").show(); 
            $(".actualVisible").show(); 
            $(".personalVisible").show(); 
            $(".worksVisible").show(); 
            $(".outsideVisible").show(); 

            $('[name="task_name"]').attr('lay-verify','required');
            $('[name="task_status"]').attr('lay-verify','required');
            $('[name="actual_work_hours"]').attr('lay-verify','required');
            $('[name="personal_plan_hours"]').attr('lay-verify','required');
            $('[name="works"]').attr('lay-verify','required');
            $('[name="is_outside_contract_hours"]').attr('lay-verify','required');
        }