Technology Sharing

[FastAdmin Development Practice] Select Cascade Selection

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

First look at the effect of the implementation

1. Implement cascading selection on the form page

2. Cascade options can be edited and added in the background

Front-end code (editing window):

  1. <div class="form-group">
  2. <label class="control-label col-xs-12 col-sm-2">{:__('渠道归属')}:</label>
  3. <div class="col-xs-12 col-sm-8">
  4. <div class="form-inline" data-toggle="cxselect" data-selects="first,second">
  5. <select class="first form-control" name="row[type]" data-url="miniform/qudao/qdtype1" >
  6. <option value="{$row.type|htmlentities}" selected=""></option>
  7. </select>
  8. <select class="second form-control" name="row[type2]" data-url="miniform/qudao/qdtype2" data-query-name="pid">
  9. <option value="{$row.type2|htmlentities}" selected=""></option>
  10. </select>
  11. </div>
  12. </div>
  13. </div>

If you want to add a window, just delete the option.

option is used as the default selected option.

Backend request interface method:

It is not difficult, just splice the data according to the format returned by the interface. The data format is as follows:

How do I get the contents of "System Configuration"? It's also very simple. I introduce it as follows:

use thinkConfig;

  1. public function qdtype1(){
  2. $qudao = Config::get('site.qdtype1');
  3. $list = [];
  4. foreach ($qudao as $key=>$val){
  5. $list[] = ['value'=>$key,'name'=>$val];
  6. }
  7. $this->success('','',$list);
  8. }
  9. public function qdtype2(){
  10. $params = $this->request->get("pid");
  11. $t = 'site.'.$params;
  12. $qudao = Config::get($t);
  13. $list = [];
  14. foreach ($qudao as $key=>$val){
  15. $list[] = ['value'=>$key,'name'=>$val];
  16. }
  17. $this->success('','',$list);
  18. }

About option configuration:

The official documentation doesn't seem to mention cascading selection, maybe it's too simple.

There are cases in the development examples in the framework for reference.

The above is my actual operation process, please mark it.