laravel-admin表单实现根据select选项展示input控件

laravel-admin表单实现根据select选项展示input控件

       博主最近在实现一个功能的时候，需要表单根据选项来展示不同的input控件，网上查看了相关东西，也是没有找到，最后在一个帖子看到了灵感，下面就跟大家分享如何实现。

       在表单中，博主需要根据select类型来展示不同的input控件，一共有4个input控件，我们需要先提前隐藏input控件，字段分别为test1、test2、test3、test4，代码如下：

$form->hidden('test1','测试');
$form->hidden('test2','测试2');
$form->hidden('test3','测试3');
$form->hidden('test4','测试4');

       然后放置我们的select控件，代码如下：

$form->select('project_id', '类型')->options(
 [1=>'测试1',2=>'测试2','3'=>'测试3',4=>'测试4']);

       然后便是我们的HTML代码，来代表这4个控件，默认都是隐藏状态，代码如下：

$form->html("
 <div class='form-group' id='test1Div' style='display:none;'>
  <label for='test1' class='col-sm-2 control-label'>测试1</label>
  <div class='col-sm-8'>
    <div class='input-group'>
      <div class='input-group'>
        <input type='number'  style='border-radius:5px' 
          id='test1' name='test1' value='0' 
          class='form-control test1' placeholder='输入数据'>
      </div>
    </div> 
  </div>
 </div>
 
 <div class='form-group' id='test2Div' style='display:none'>
  <label for='test2' class='col-sm-2 control-label'>测试2</label>
  <div class='col-sm-8'>
    <div class='input-group'>
      <div class='input-group'>
         <input type='number' style='border-radius:5px' 
          id='test2' name='test2' value='0' 
          class='form-control test2' placeholder='输入数据'>
      </div>
    </div>
  </div>
 </div>
                    
 <div class='form-group' id='test3Div' style='display:none'>
  <label for='test3' class='col-sm-2 control-label'>测试3</label>
  <div class='col-sm-8'> 
   <div class='input-group'>
    <div class='input-group'>
        <input style='border-radius:5px' type='number' 
      id='test3' name='test3' value='0' class='form-control test3' 
       placeholder='输入数据'>
    </div>
   </div>
  </div>
 </div>
                    
 <div class='form-group'  id='test4Div' style='display:none''>
  <label for='test4' class='col-sm-2 control-label'>测试四</label>
  <div class='col-sm-8'>
   <div class='input-group'>
     <input type='text' style='border-radius:5px'
     id='test4' name='test4' value='0' class='form-control test4' 
     placeholder='输入数据'>
   </div>
   </div>
 </div>
");

       然后便是一段JS代码来控制根据选项展示不同input的效果，代码如下：

Admin::script("
    $('select[name=project_id]').change(function(){
       //重新隐藏DIV
       document.getElementById('test1Div').style.display = 'none';
       document.getElementById('test2Div').style.display = 'none';
       document.getElementById('test3Div').style.display = 'none';
       document.getElementById('test4Div').style.display = 'none';
                        
       //重置input的值
       $('input[name=test1]').val('0')
       $('input[name=test2]').val('0')
       $('input[name=test3]').val('0')
       $('input[name=test4]').val('0')
            
       //获取选中数值
       var opt=$('select[name=project_id]').val();
       //根据条件判断
       if(opt===1){
           document.getElementById('test1Div').style.display = 'block';
       }else if(opt===2){
           document.getElementById('test2Div').style.display = 'block';
       }else if(opt===3){
           document.getElementById('test3Div').style.display = 'block';
       }else if(opt===4){
           document.getElementById('test4Div').style.display = 'block';
       }else{
       }
    });
");

       这样我们便成功实现了根据select展示不同的input。