Bootstrap / Select 2 - Initialize on Click

Bootstrap---Select-2---Initialize-on-Click.markdown

Bootstrap / Select 2 - Initialize on Click

Click event bound to table row. When use clicks on TR, a list of options is shown.

A Pen by Doug Hill on CodePen.

License.

index.html

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

script.js

//  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();
  });
});

style.less

th {
text-align: left;
}

tbody {
    td {
      &.col {
         width: 280px;
      }
  }
}