python测试开发django-152.bootstrap-select下拉框操作方法
2021/10/12 20:14:52
本文主要是介绍python测试开发django-152.bootstrap-select下拉框操作方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
select下拉框操作方法主要会用到2个:
- 1.获取select的值,提交数据时候给到服务端
- 2.获取服务端设置的值,回显到select选项框上
操作方法
获取select的值:
$(".selectpicker").val()
实例
<head> <link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css"> <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script> <script src="/static/bootstarp/js/bootstrap.min.js"></script> <script src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script> </head> <body> <div class="container"> <h1>select下拉框示例</h1> <select class="selectpicker" title="请选择"> <option value="1" title="python自动化">python</option> <option value="2" title="web自动化">selenium</option> <option value="3" title="pytest自动化">pytest</option> <option value="4" title="app自动化">appium</option> <option value="5" title="UI自动化">cypress</option> </select> <button id='btn' class="btn btn-info">点我获取</button> </div> <script> // 获取选项值 $('#btn').click(function(){ var s = $(".selectpicker").val(); console.log('select值:'+s) }) </script> </body>
显示效果
设置回显
设置select的值,用方法
$('.selectpicker').selectpicker('val', '3');
实例
<!DOCTYPE html> <html lang="zh-CN"> <head> <link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/static/bootstrap-select/dist1.12.4/css/bootstrap-select.min.css"> <script src="/static/bootstarp/jquery/jquery3.2.1.js"></script> <script src="/static/bootstarp/js/bootstrap.min.js"></script> <script src="/static/bootstrap-select/dist1.12.4/js/bootstrap-select.min.js"></script> </head> <body> <div class="container"> <h1>select下拉框示例</h1> <select class="selectpicker" title="请选择"> <option value="1" title="python自动化">python</option> <option value="2" title="web自动化">selenium</option> <option value="3" title="pytest自动化">pytest</option> <option value="4" title="app自动化">appium</option> <option value="5" title="UI自动化">cypress</option> </select> <button id='btn' class="btn btn-info">点我获取</button> </div> <script> // 打开页面,直接设置select框的值为3-pytest $('.selectpicker').selectpicker('val', '3'); // 获取选项值 $('#btn').click(function(){ var s = $(".selectpicker").val(); console.log('select值:'+s) }) </script> </body> </html>
显示效果
多选获取与设置
获取跟单选是一样
s = $(".selectpicker").val();
设置select值传数组
$('.selectpicker').selectpicker('val', ['1','3']);
示例
<body> <div class="container"> <h1>select下拉框示例</h1> <select class="selectpicker" title="请选择" multiple> <option value="1" title="python自动化">python</option> <option value="2" title="web自动化">selenium</option> <option value="3" title="pytest自动化">pytest</option> <option value="4" title="app自动化">appium</option> <option value="5" title="UI自动化">cypress</option> </select> <button id='btn' class="btn btn-info">点我获取</button> </div> <script> // 设置多选项值 $('.selectpicker').selectpicker('val', ['1','3']); // 获取选项值 $('#btn').click(function(){ var s = $(".selectpicker").val(); console.log('select值:'+s) }) </script> </body>
显示效果
其它更多操作方法参考文档https://www.bootstrapselect.cn/methods.html
这篇关于python测试开发django-152.bootstrap-select下拉框操作方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-21Python编程基础教程
- 2024-11-20Python编程基础与实践
- 2024-11-20Python编程基础与高级应用
- 2024-11-19Python 基础编程教程
- 2024-11-19Python基础入门教程
- 2024-11-17在FastAPI项目中添加一个生产级别的数据库——本地环境搭建指南
- 2024-11-16`PyMuPDF4LLM`:提取PDF数据的神器
- 2024-11-16四种数据科学Web界面框架快速对比:Rio、Reflex、Streamlit和Plotly Dash
- 2024-11-14获取参数学习:Python编程入门教程
- 2024-11-14Python编程基础入门