jollyKuma
6/7/2017 - 3:49 AM
select2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select 2</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<style>
th:nth-of-type(3), th:nth-of-type(5) {
border-left: 2px dashed #555 !important;
border-right: 2px dashed #555 !important;
}
.first-col td:nth-of-type(3), .first-col td:nth-of-type(5) {
border-left: 2px dashed #555 !important;
border-right: 2px dashed #555 !important;
}
.second-col td:nth-of-type(2), .second-col td:nth-of-type(4) {
border-left: 2px dashed #555 !important;
border-right: 2px dashed #555 !important;
}
.first-col td:nth-of-type(2), .first-col td:nth-of-type(4),
.second-col td:nth-of-type(1), .second-col td:nth-of-type(3) {
background-color:#FDD692;
}
</style>
</head>
<body>
<div class="container">
<div class="container">
<h2>Dicker Booth</h2>
<table class="table table-bordered">
<caption>Favorite and Least Favorite Things</caption>
<tr>
<th>Dicker Booth</th>
<th>10:00 ~ 10:20</th>
<th width="30"></th>
<th>10:30 ~ 10:50</th>
<th width="30"></th>
</tr>
<tr class="first-col">
<td rowspan="2" class="text-center">DickerBooth 001</td>
<td>Company 1</td>
<td>Buy</td>
<td>Company2</td>
<td>Sell </td>
</tr>
<tr class="second-col">
<td>Company 2</td>
<td>Sell</td>
<td>Company 3</td>
<td> Buy</td>
</tr>
<tr class="first-col">
<td rowspan="2" class="text-center">Dicker Booth 002</td>
<td>Company 1</td>
<td>Buy</td>
<td>Company 3</td>
<td>Sell</td>
</tr>
<tr class="second-col">
<td>Company 2</td>
<td>Collab</td>
<td>Company 5</td>
<td>Sell</td>
</tr>
</table>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="form-inline">
<div class="form-group">
<select id="select-1" class="form-control select-js-1" style="width:350px"></select>
</div>
<div class="form-group">
<select id="" class="form-control">
<option value="1">Buy</option>
<option value="2">Sell</option>
<option value="3">Collaborate</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="form-group">
<select id="select-2" class="select-js-2 form-control" style="width:350px"></select>
</div>
<div class="form-group">
<select id="" class="form-control">
<option value="1">Buy</option>
<option value="2">Sell</option>
<option value="3">Collaborate</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="form-group">
<label>Booth Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="form-group">
<label>Time</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(document).ready(function() {
var selected_1, selected_2;
var root = 'https://jsonplaceholder.typicode.com';
$.ajax({
url: root + '/users',
method: 'GET'
}).then(function(data) {
var immutableData = data.map(function(item) {
var _item = {
id: item.id,
text: item.name
}
return _item;
});
$(".select-js-1").select2({
placeholder: {
id: "0",
text: ""
},
allowClear:true,
data: immutableData
});
$(".select-js-2").select2({
placeholder: {
id: "0",
text: "",
},
data: immutableData,
allowClear:true,
});
$('select').on('select2:select', handleSelectChange.bind(this, immutableData));
$('select').on('select2:unselect', handleSelectChange.bind(this, immutableData));
});
function handleSelectChange(data, evt) {
evt.target.id == 'select-1' ? selected_1 = $('#' + evt.target.id).val() : selected_2 = $('#' + evt.target.id).val()
initializeSelect(evt.target.id, data);
}
function initializeSelect(selectId, data) {
var _data = JSON.parse(JSON.stringify(data));
var _result = [];
var _selected = selectId == 'select-1' ? selected_1 : selected_2;
_data.map(function(_dataitem) {
var index = _selected.indexOf(String(_dataitem.id));
index !== -1 ? _dataitem.disabled = true : _dataitem.disabled = false
_result.push(_dataitem)
});
if (selectId == 'select-1') {
var _select_2 = $(".select-js-2").select2("destroy").empty().select2({ data: _result }).trigger('change');
_select_2.val(selected_2).trigger('change')
}
else {
var _select_1 = $(".select-js-1").select2("destroy").empty().select2({ data: _result }).trigger('change');
_select_1.val(selected_1).trigger('change')
}
}
});
</script>
</body>
</html>