Bootstrap / Select 2 - Initialize on Click
th {
text-align: left;
}
tbody {
td {
&.col {
width: 280px;
}
}
}
// assign your select dropdown items
var infoCategory = [
{
"id": 1,
"text": "Tickets"
},
{
"id": 2,
"text": "Parking"
},
{
"id": 3,
"text": "Special Events"
},
{
"id": 4,
"text": "Athletics"
}
];
// create object of options to send to select2
var select2Options = {
allowClear : false,
closeOnSelect : true,
selectOnClose : false,
minimumInputLength : 0,
maximumInputLength : 0,
maximumSelectionLength : 0,
minimumResultsForSearch : Infinity,
multiple : false,
tags : false,
theme : 'default',
width : 'element',
// this is where you stick in the dropdown options by using the variable name of the object
// if you choose to assign the data later use an empty array (data:[])
data : infoCategory
};
// now you need a function with an event ('click') in this case, to send the dropdown items to select2
var offerCategoryInfo = function () {
// set a variable to the element that was clicked - we will need it to find the select2 data() so we can alter it
var $element = $(this.event.target),
// by naming the button and the select element uniquely (but not the exact same) with ID's - we can associate them together with concatenation
$selectID = '#sel-' + $element.attr('id'),
$hiddenID = '#hidden-' + $element.attr('id'),
// now that we know which select element we assigned select2 to, lets set a var to its data
$select2 = $($selectID),
$hidden = $($hiddenID),
// pull the selected item value out
value = function (result) {
return $select2.prop('value');
}
// stop clicks from doing anything but what you want
event.preventDefault();
// unhide the select element container
$hidden.removeClass('hidden');
// now give select2 its options along with the data that is already set inside options
// just call select2 again on same element, the new options will overwrite any existing or previous ones
// or destroy it first is probably best since we created it earlier, which their really was no need for this example. (uncomment below if you want to destroy and then create)
$select2.select2('destroy');
$select2.select2(select2Options);
// output to console for debugging if need be
console.log($element);
console.log($selectID);
console.log($hidden);
console.log($select2);
// trivial debugging in this example but just to show the concept of what you can do
// chain it all up
$('.output').each(function () { $(this).removeClass('hidden'); });
$('#itemdata').empty().text(JSON.stringify(infoCategory, null, 2));
$('#selectedItem').empty().text(JSON.stringify(value(), null, 2));
};
$(document).ready(function () {
// go ahead and put the select2 plugin on the element, you can give it data at any time
$('select').select2();
// to keep it simple for this example, just going to use all buttons on page as the selectors
$('button').click(function () {
// now give the button something to do when clicked on - so run the function created
offerCategoryInfo();
});
});
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th class="text-center bg-primary" colspan="2">
<h3>Sports Event Information</h3>
</th>
</tr>
<tr>
<th class="">
<h4>Event</h4>
</th>
<th class="">
<h4>Info</h4>
</th>
</tr>
</thead>
<tfoot>
<tr>
<td class="bg-default text-muted text-center" colspan="2"><small>contact us for more information @ arena 555.122.1212</small></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="col">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail">
<img class="img-rounded" src="//placehold.it/245x115/blue">
<div class="caption">
<h4>Sunday Football</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p>
<p><button class="form-control btn btn-sm btn-block btn-info" id="s2select01" type="button">Click for Details</button></p>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="row">
<div class="col-xs-12">
<div id="hidden-s2select01" class="hidden">
<form>
<div class="panel panel-primary">
<div class="panel-body">
<select class="form-control js-example-basic-multiple" id="sel-s2select01" multiple="false" name="s2select">
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="col">
<div class="row">
<div class="col-xs-12">
<div class="thumbnail">
<img class="img-rounded" src="//placehold.it/245x115/">
<div class="caption">
<h4>Friday Volleyball</h4>
<p class="text-muted">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet ame amet amet! Consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit!</p>
<p><button class="form-control btn btn-sm btn-block btn-info" id="s2select02" type="button">Click for Details</button></p>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="row">
<div class="col-xs-12">
<div id="hidden-s2select02" class="hidden">
<form>
<div class="panel panel-primary">
<div class="panel-body">
<select class="form-control js-example-basic-multiple" id="sel-s2select02" multiple="false" name="s2select">
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="output hidden">
<div class="row">
<div class="col-sm-12">
<div class="well">
<pre>
<code id="itemdata"></code>
</pre>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="well">
<pre>
<code id="selectedItem"></code>
</pre>
</div>
</div>
</div>
</div>
</div>