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

I am an instigator of artistic, intelligent and mind boggling softwares. I love C#, envy C++, and one day I might try CUDA. I prefer solving complex and mission impossible problems in a new or old but innovative way. Am intrigued by machine learning challenges, security critical challenges, and privacy challenges like a real serverless peer-to-peer communication. I am usually literally stressed when a day goes by without learning or doing something new. I avoid repetition whenever possible. Away from computers, I enjoy capturing moments of life and nature with 1080 (…and above) pixel pictures and videos. I like details, accuracy, idealistic but realistic personalities. I love futurist’s but I hate fantasy. A decent, moderate and gentle character is my favorite. I avoid shame like a plague, confront my fears with facts, and I am very constant with opinions and beliefs. I love suits (…but don’t wear them), arsenal football club (…I only know the manager), and I have no favorite food. Reading and writing poems helps me retain my sobriety. I consider myself funny, privileged, a renaissance man and sometimes shy. I believe in things unseen and incomprehensible.

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: