Using Select2.js jQuery plugin

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

Advertisements

About Kabue Charles

As a software architect, I am specialized in .NET and JavaScript. As an entrepreneur, I invest my time, money, energy and will in creating things that will make lives better. As a philosopher, I learn about happiness, people and my environment. As a poet, I write about human transcendence. As a man, I am modest moralist, a centrist, a progressive evolutionist and a man of quotable quotes

Posted on January 16, 2015, in Learning and tagged , , , . Bookmark the permalink. Leave a comment.

Say Something....

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: