javascript – Bootstrap：一个内部有多个选择字段

2019年7月2日 188次阅读

我正在寻找一种方法来实现一个自定义选择字段,该字段具有多个选择字段的功能(每个字段只有一个可选条目).我没有找到任何方法将所有选择字段合并为一个,也没有办法允许每个表单类别选择一个.

Here is what I have

Here is what I am trying to achieve

我当前结构的示例：

<!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>

最佳答案更新：我发现了一个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

<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>

旧解决方案1：

我想您希望使用< optgroup> s将多个< option>组合并为一个< select>.为确保您可以选择多个选项,您需要将多个布尔属性添加到< select>.但是,您仍需要制作它,以便最多只能选择一个每< optgroup>. this question的答案提供了一个很好的javascript代码.

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

$('select optgroup option').click(function() {
    $(this).siblings().prop('selected', false);
});

<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>

旧解决方案2

这是我使用Boostrap的Dropdown创建的新解决方案.我创建了这个,因为其他解决方案不是下拉列表,所以可能不是你想要的.请让我知道这对你有没有用.

$('.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');
});

<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>