fastadmin框架select下拉框该怎么写(接口数据)

这篇具有很好参考价值的文章主要介绍了fastadmin框架select下拉框该怎么写(接口数据)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先让大家看一下最终效果:

fastadmin框架select下拉框该怎么写(接口数据)

 来上代码:

<select id="c-education" data-rule="required" class="form-control selectpicker" name="row[education]">
  {foreach name="education" item="vo"}
  <option value="{$key}" {in name="key" value="" }selected{/in}>{$vo}</option>
  {/foreach}
</select>

这里给大家解释一下class名:selectpicker,如果没有这个class名的话他就是一个普通的下拉框:

fastadmin框架select下拉框该怎么写(接口数据)

然后,下一个问题:怎么给select数据呢?这个呢需要再php(控制器)里面给,至于在那个方法看你自己,我是在_initialize方法给的数据

 // 学历
$education = [
    '1' => __('初中及以上'),
    '2' => __('高中'),
    '3' => __('专科'),
    '4' => __('本科'),
    '5' => __('研究生'),
];
$this->view->assign( 'education', $education );

请求接口的方法:

$itemsList = Db::name('ceshi')->select();
    foreach ( $itemsList as $k => $v ) {
    //赋值    以id为下标的数组包对象
    $education[$v['name']] = $itemsList[$k]['name'];
}
$this->view->assign( 'education', $education );

 还有一个问题,如何回显数据呢?大家看一下下面这个图:

fastadmin框架select下拉框该怎么写(接口数据)

 这个value呢就是用来选择默认选中的value值。一般情况下,点击编辑都是向编辑视图传数据表里所有数据的,所以这是只需这样操作:

在控制器里:$row = $this->model->get( [ 'id' => $ids ] );$this->view->assign( 'row', $row );

下面是view视图代码:

<select id="c-gender" data-rule="required" class="form-control selectpicker" name="row[education]">
    {foreach name="education" item="vo"}
    <option value="{$key}" {in name="key" value="$row['education']" }selected{/in}>{$vo}</option>
    {/foreach}
</select>

完成以上操作呢就结束了,如果帮助您解决问题了希望一键三连哦,如果写的有问题,还请多多指教。文章来源地址https://www.toymoban.com/news/detail-511866.html

到了这里,关于fastadmin框架select下拉框该怎么写(接口数据)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • el-select 无限下拉滚动加载数据

    template   div     el-form       ref=\\\"saveParameter\\\"       :model=\\\"saveParameter\\\"       inline       inline-message       style=\\\"margin:10px\\\"           el-form-item label=\\\"供应商\\\" prop=\\\"lngcustomerid\\\"         el-select           v-model=\\\"saveParameter.lngcustomerid\\\"           v-loadmore=\\\"loadMore()\\\"           styl

    2024年02月14日
    浏览(28)
  • Vue实现select下拉框二级联动数据后台获取

    一、二级联动在vue中实现selected的二级联动取其实很简单,可以使用select下拉框的表单改变事件。  @change在表单内容发生改变时出发方法。然后在下面的methods中声明方法,通过this.form.ks获取到当前下拉框的数据。  然后调用后两级访问数据库的方法,获取到联动的数据,添加

    2024年02月16日
    浏览(31)
  • elementUi select下拉框触底加载异步分页数据

    在Element UI中,可以通过监听select下拉框的 visible-change 事件来实现触底加载下一页的效果。 方式一:利用elementUi的事件 具体步骤如下: 首先,在select组件中设置: @visible-change=\\\"handleVisibleChange\\\" ref=\\\"mySelect\\\" 在data中定义一个变量pageNum,用于记录当前加载的页码: pageNum: 1, 在m

    2024年02月14日
    浏览(27)
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el-select与el-tree,实现如下效果, 代码如下:  注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

    2024年02月13日
    浏览(37)
  • el-select下拉框处理分页数据,触底加载更多

    1、声明自定义指令: 2、使用自定义指令v-loadmore: 3、发送请求加载数据 参考:el-select滚动到底部加载更多(分页加载数据)_el-select 触底加载分页_天道酬勤_鹿的博客-CSDN博客

    2024年02月16日
    浏览(26)
  • Vue + element ui 实现后台数据渲染到下拉框选项中,同时将input框与下拉框联动,select选定之后,input显示对应的值

    实现过程: 使用element 的select以及input输入框 在data中定义一个数组用于接收后台请求的数据 method中定义一个方法,用于请求数据 在created中实现显示: listMidMapping为封装好的get请求 至此实现后台数据渲染到下拉框选项中,效果图: 以上借鉴于: (21条消息) Vue + element 实现动

    2024年02月08日
    浏览(28)
  • avue 表单绑定值;avue表单项根据某项的值去联动显隐或是联动下拉数据;avue select切换与另外一个select的options联动

    效果:发布type为shp时 数据相关的都隐藏,当发布type为postgis时则显示   html  js data中定义  publishForm中就是表单中收集的值,后面将其中的数据与后端交互。 注意:其中要显隐的表单项要给一个display初始状态值。 实现avue表单项根据某项的值 去联动 其他表单项下拉也是同理

    2024年02月15日
    浏览(32)
  • 如何vue使用ant design Vue中的select组件实现下拉分页加载数据,并解决存在的一个问题。

        需求:拉下菜单中数据过多,200条以上,就会导致select组件卡死。所以需要使用滑动到底部使其分页加载     可以借助 onPopupScroll 事件来监听下拉菜单的滚动事件,并判断当前是否已经到达了下拉菜单底部。具体可以通过以下步骤实现:     1、在组件中绑定 @popupScro

    2023年04月20日
    浏览(42)
  • 微信小程序实现下拉简单展示接口数据

    在.js文件中这样写,代码如下: 在wxml文件中这样写,代码如下: 在.json文件中记得添加如下代码,打开下拉功能 \\\"window\\\":{     \\\"backgroundTextStyle\\\":\\\"light\\\",     \\\"navigationBarBackgroundColor\\\": \\\"#282A36\\\",     \\\"navigationBarTitleText\\\": \\\"Linux\\\",     \\\"navigationBarTextStyle\\\":\\\"white\\\",      \\\"enablePullDo

    2024年01月20日
    浏览(31)
  • selenium:select下拉框

    以下两种导的包没有任何本质区别。ui包就是调用Select包中的select方法。 **选择下拉选项:**select类提供了3种方法某一选项的方法,分别是: 通过index选择下拉选项——select_by_index(index); 通过value值选择下拉选项——select_by_value(value); 通过可见的text选择下拉选项——select_by_

    2024年02月05日
    浏览(27)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包