Bootstrap-Select - 如何保持靜態標題？

簡單的問題。我的選擇下拉是這樣的：Bootstrap-Select - 如何保持靜態標題？

<select class="selectpicker" multiple data-container="body" data-title="Options" data-size="10" data-width="100%" data-selectedTextFormat="static" > 
    <option value="default">Test</option> 
</select>

我想，不管是選擇什麼樣的，保持這一稱號（「選項」）。即使我這樣做：

$('.selectpicker').selectpicker('val', "default");

我希望它留在標題「選項」。我試過了，你可以看到，data-title和data-selectedTextFormat屬性，但它沒有奏效。

來源

2017-02-12 Mingle Li

你是說你不管用戶選擇什麼你想要的值是「選項」？ –

@CesarBielich Precisely –

參見Options

選項可以通過數據傳遞屬性或JavaScript。對於屬性數據，選項名稱追加到data-，如data-style=""或 data-selected-text-format="count"

你的數據屬性是不正確的，應該是data-selected-text-format="static"。

使用數據屬性

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> 
 

 
<div class="container"> 
 
    <select class="selectpicker" multiple data-title="Options" data-size="10" data-width="100%" data-selected-text-format="static"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    <option value="11">11</option> 
 
    <option value="12">12</option> 
 
    </select> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

使用JavaScript

$('.selectpicker').selectpicker({ 
 
    selectedTextFormat: 'static', 
 
    width: '100%', 
 
    size: 10, 
 
    title: 'Options' 
 
});

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css"> 
 

 
<div class="container"> 
 
    <select class="selectpicker" multiple> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    <option value="11">11</option> 
 
    <option value="12">12</option> 
 
    </select> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

來源

2017-02-13 01:28:00 vanburen

哦，我現在看到，錯誤是數據屬性錯誤。謝謝！ –

如果你想在默認情況下始終保持不變，不管用戶選擇什麼，那麼你可以只設置每個<option>相同的值，並更改標題

<select class="selectpicker" multiple data-container="body" data-title="Options" data-size="10" data-width="100%" data-selectedTextFormat="static" > 
    <option value="Options">Title1</option> 
    <option value="Options">Title2</option> 
    <option value="Options">Title3</option> 
    <option value="Options">Title4</option> 
    <option value="Options">Title5</option> 
    <option value="Options">Title6</option> 
</select>

，但我不知道你爲什麼會想要的。

來源

2017-02-13 00:26:35

Bootstrap-Select - 如何保持靜態標題？

回答

相關問題