python測試開發django-152.bootstrap-select下拉框操作方法

阿新 • • 發佈：2021-10-12

前言

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