个人中心
gpt4 book ai didi

javascript - Bootstrap : Multiple select fields inside one

转载 作者：搜寻专家 更新时间：2023-10-31 08:41:15 24 4
gpt4 key购买 nike

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

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 下拉菜单。它的一个特点是你可以拥有一个 <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> .并确保您可以选择多个选项，您需要添加 multiple <select> 的 bool 属性.但是，您仍然需要制作它，因此您最多只能选择一个 <option>每<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-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>

关于javascript - Bootstrap : Multiple select fields inside one，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42960258/

24 4 0
文章推荐： jquery - 当我给 标签时无法追加行
文章推荐： html - 将文本区域输入包裹在一个 div 周围
文章推荐： html - 为什么 flex 容器不基于嵌套的 flex 容器子容器增长
文章推荐： html - CSS 底部边框外的背景
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com