Bootstrap: Multiple select fields inside one

时间：2017-03-22 18:48:44

标签： javascript jquery html css twitter-bootstrap

I'm looking for a way to implement a custom select field that has a functionality of several select fields (each one has only one selectable entry). I didn't find any way to merge all the select fields into one, either nor way to allow one selection per form category.

Here is what I have

Here is what I am trying to achieve

Example of my current structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Page</title>
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	

	<style>
	.table > tbody > tr > td {
		text-align: center;
		vertical-align:middle;
	}
	.col-xs-2 {
		padding-top: 10%;
		padding-left: 10%;
	}
	</style>
  </head>
  
  <body>
  		<div class="form-group">
		  <div class="col-sm-3">      
						<label for="color" >Color:</label>
						<select class="form-control" id="color" >
						<option value="red">Red</option>
						<option value="green">Green</option>
						<option value="blue">Blue</option>
						</select>
		 </div>
		  <div class="col-sm-3">      
						<label for="style">Style:</label>
						<select class="form-control" id="style" >
							<option value="square" >Square</option>
							<option value="sphere">Sphere</option>
					  </select>
		 </div>
		  <div class="col-sm-3">      
						<label for="size" >Size:</label>
						<select class="form-control" id="size" >
							<option value="tiny">Tiny</option>
							<option value="smallest">Smallest</option>
							<option value="small">Small</option>
							<option value="medium">Medium</option>
							<option value="big">Big</option>
							<option value="biggest">Biggest</option>
							<option value="huge">Huge</option>

					  </select>
		 </div>		 
		</div>
</body>

1 个答案:

答案 0 :(得分：2)

更新：我找到了一个jQuery插件，可以帮到你。它被称为 Bootstrap-select 。请在此处查看：https://silviomoreto.github.io/bootstrap-select/

此插件将<select>转换为Bootstrap Dropdown。它的一个功能是，您可以<select multiple>...</select>使用<optgroup>（如下所述），并且可以使用<optgroup>属性设置每data-max-options个选项的最大数量。因此，您可以为每个<optgroup>将其设置为1。以下是该功能的文档：https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/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>

<div class="container">
    <select class="selectpicker" multiple>
        <optgroup label="Color" data-max-options="1">
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </optgroup>
        <optgroup label="Style" data-max-options="1">
            <option value="square" >Square</option>
            <option value="sphere">Sphere</option>
        </optgroup>
        <optgroup label="Size" data-max-options="1">
            <option value="tiny">Tiny</option>
            <option value="smallest">Smallest</option>
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="big">Big</option>
            <option value="biggest">Biggest</option>
            <option value="huge">Huge</option>
        </optgroup>
    </select>
</div>
＆＃13;
＆＃13;
＆＃13;

旧解决方案1：

我认为您希望使用<optgroup> s将多个<option>组合并为一个<select>。为确保您可以选择多个选项，您需要将multiple布尔属性添加到<select>。但是，您仍然需要进行此操作，因此每<option>最多只能选择一个<optgroup>。 this question的答案提供了一个很好的javascript代码。

这是我放在一起的演示。按住键盘上的 Control 可选择多个选项。请注意，如果您尝试从同一<optgroup>中选择其他选项，则前一个选项将被取消选择。

＆＃13;
＆＃13; 
$('select optgroup option').click(function() {
    $(this).siblings().prop('selected', false);
});
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
    <select class="form-control" multiple style="width:200px;height:400px;">
        <optgroup label="Color">
            <option>Red</option>
            <option>Green</option>
            <option>Blue</option>
        </optgroup>
        <optgroup label="Style">
            <option>Square</option>
            <option>Sphere</option>
        </optgroup>
        <optgroup label="Size">
            <option value="tiny">Tiny</option>
            <option value="smallest">Smallest</option>
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="big">Big</option>
            <option value="biggest">Biggest</option>
            <option value="huge">Huge</option>
        </optgroup>
    </select>
</div>
＆＃13;
＆＃13;
＆＃13;

旧解决方案2

这是我使用Boostrap的Dropdown创建的新解决方案。我创建了这个，因为另一个解决方案不是下拉列表，所以可能不是你想要的。让我知道它是否适合你。

＆＃13;
＆＃13; 
$('.dropdown-menu li a').click(function() {
    var groupId = $(this).attr('href');
    $(groupId).val($(this).attr('data-sel'));
    $(this).closest('.dropdown-menu').find('li a[href="'+groupId+'"]').removeClass('bg-success');
    $(this).addClass('bg-success');
});
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li class="dropdown-header">Color</li>
            <li><a href="#color" data-sel="red" class="bg-success">Red</a></li>
            <li><a href="#color" data-sel="green">Green</a></li>
            <li><a href="#color" data-sel="blue">Blue</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Style</li>
            <li><a href="#style" data-sel="square" class="bg-success">Square</a></li>
            <li><a href="#style" data-sel="sphere">Sphere</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Size</li>
            <li><a href="#size" data-sel="tiny" class="bg-success">Tiny</a></li>
            <li><a href="#size" data-sel="smallest">Smallest</a></li>
            <li><a href="#size" data-sel="small">Small</a></li>
            <li><a href="#size" data-sel="medium">Medium</a></li>
            <li><a href="#size" data-sel="big">Big</a></li>
            <li><a href="#size" data-sel="biggest">Biggest</a></li>
            <li><a href="#size" data-sel="huge">Huge</a></li>
        </ul>
    </div>
    <div class="form-group">
        <div class="col-sm-3">      
            <label for="color" >Color:</label>
            <select class="form-control" id="color" >
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
            </select>
        </div>
        <div class="col-sm-3">      
            <label for="style">Style:</label>
            <select class="form-control" id="style" >
                <option value="square" >Square</option>
                <option value="sphere">Sphere</option>
            </select>
        </div>
        <div class="col-sm-3">      
            <label for="size" >Size:</label>
            <select class="form-control" id="size" >
                <option value="tiny">Tiny</option>
                <option value="smallest">Smallest</option>
                <option value="small">Small</option>
                <option value="medium">Medium</option>
                <option value="big">Big</option>
                <option value="biggest">Biggest</option>
                <option value="huge">Huge</option>

            </select>
        </div>       
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题