All geek questions in one place

Bootstrap: multiple selection fields inside one

I am looking for a way to implement a custom selection field that has the functionality of several selection fields (each of them has only one selectable record). I did not find a way to merge all the selection fields into one, nor a way to allow one choice for each form category.

Here is what i have

This is what i am trying to achieve

An 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>
Run code
+4
source share
1 answer

Update: I found a jQuery plugin that will do this for you. It is called Bootstrap-select . Take a look here: https://silviomoreto.imtqy.com/bootstrap-select/

<select> Dropstrap Dropdown. , <select multiple>...</select> <optgroup> ( ), <optgroup> data-max-options. 1 <optgroup>. : https://silviomoreto.imtqy.com/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>, <option> <select>. , , multiple Boolean <select>. , <option> <optgroup>. 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 Dropdowns. , , , . , .

$('.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>
+2

Source: https://habr.com/ru/post/1672953/

More articles:


All Articles