Using Select2.js jQuery plugin

/ Learning / By

Lately, I have been on a project that required a heavy use of HTML select. I choose select2 after a period of comparison which other plugins like choose.js and selectize.js. it was very easy to get along, thanks to the almost enough documentation. i am writing this post to answer my own question which I asked at stackoverflow, since I never got even a single relevant response. Its really scaring how some stackoverflow boys want to cause trouble when you mean no harm. I mean, if you see someone asking a SLIGHTLY AMBIGUOUS question, it means that most likely, they only have the idea of what is to be done. Sometimes you don’t even know what to Google, so you feel inclined to ask a question so at least you get your search terms right, or should stackExchange have another site called “search-terms”??

Anyway, here was my question…

Autofilling inputs and selects with select2

and here is my answer…

<form style="width: 350px;" id="" class="navbar-form form" role="form" data-bind="">
<dl class="dl-horizontal">
<dt>President</dt>
<dd><select data-placeholder='President' id="president" class="select11" style="width: 300px;">
<option></option>
<option value="AK">Mickel</option>
<option value="HI">James</option>
<option value="CA">Sandney</option>
</select>
</dd>
<dd>
<input id="runningMate" placeholder="running mate" class="form-control" type="" name="" style="width: 300px;" disabled>
</dd>
</dl>

<dl class=”dl-horizontal”>
<dt>Secretary General</dt>
<dd><select data-placeholder=’Secretary General’ class=”select11″ style=”width: 300px;”>
<option></option>
<option value=”AK”>Alaska</option>
<option value=”HI”>Hawaii</option>
<option value=”CA”>California</option>
<option value=”NV”>Nevada</option>
<option value=”OR”>Oregon</option>
</select>
</dd>
</dl>

<dl class=”dl-horizontal”>
<dt>Financial Controller</dt>
<dd><select data-placeholder=’Financial Controller’ class=”select11″ style=”width: 300px;”>
<option></option>
<option value=”AK”>Alaska</option>
<option value=”HI”>Hawaii</option>
<option value=”CA”>California</option>
<option value=”NV”>Nevada</option>
<option value=”OR”>Oregon</option>
</select>
</dd>
</dl>

<dl class=”dl-horizontal”>
<dt>Faculty representative</dt>
<dd><select data-placeholder=’Choose Faculty’ id=”faculty” class=”select11″ style=”width: 300px;”>
<option></option>
<option value=”fist”>fist</option>
<option value=”commerce”>commerce</option>
<option value=”spas”>spas</option>
</select>
</dd>
<dd><select data-placeholder=’Faculty representative’ id=’representative’ class=”select11″ style=”width: 300px;”>
<option></option>
</select>
</dd>
</dl>
</form>

and here is the script that is doing the magic…
<script>
$(function(){
$('#president').select2({
allowClear: true
})
.on("select2-selecting", function(e) {
if (e.choice.text == "Mickel"){ $('#runningMate').val('Mercy is ' + e.choice.text + "'s Running Mate"); }
else if (e.choice.text == "James"){ $('#runningMate').val('Mukami is ' + e.choice.text + "'s Running Mate"); }
else if (e.choice.text == "Sandney"){ $('#runningMate').val('Moses is ' + e.choice.text + "'s Running Mate"); }
})

$(‘#representative’).select2({
allowClear: true
});

$(‘#faculty’).select2({
allowClear: true
})
.on(“select2-open”, function() {
fist=new Array(“jamo”,”sam”,”kaka”,”jane”);
commerce=new Array(‘chalo’,’mark’,’timo’);
spas=new Array(‘ali’,’Elke’,’Fred’,’Bobby’,’Frits’);

$(‘#faculty’).change(function(){ populateSelect(); });
function populateSelect(){
var representative = $(‘#faculty’).val();
$(‘#representative’).select2(“data”,””);
$(‘#representative’).html(‘<option></option>’);

eval(representative).forEach(function(t) {
//$(‘#representative’).select2(“val”:””);
$(‘#representative’).append(‘<option>’+t+'</option>’);
});
}
})
});
</script>

and this is what i got…

select1

select2