We Keep Coding

How to set cloning on select?

I have a question about <select>
This my code
<div class="AllSize SizeSML hidden2">
<div class="row-fluid appendSMLModel">
<div class="row-fluid span16 appendSML" for="0">
<div class="span3 mobileFullPhone2">
<label>Size</label>
<div class="select-container">
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
<div class="span5 mobileFullPhone2">
<label>Stock</label>
<input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
</div>
</div>
</div>
</div>
$(document).on('change', '#SizeUniSML', function(e) {
var selectval = $(this).find(":selected").val();
if (selectval == "delete") {
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
var count = $('.appendSML').length;
var clone = $('.appendSML:first').clone();
$('.appendSMLModel').append(clone);
}
});
This jsfiddle
Ok, this my question
Question 1
How do I add the code if I use clone()? If you see the code above, the first option is only filled by small medium and large, but I want to add the code after the clone <option value="delete">Delete</option> to delete. To be like this
---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
---------------------- This SELECT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="delete">Delete</option>
</select>
Question 2
If I choose a medium, then medium option on the clone will be disabled
---------------------- This NOT CLONE ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium" selected="" >Medium</option>
<option value="large">Large</option>
</select>
---------------------- This SELECT CLONE:FIRST ----------------------
<select name="size_SML_select" id="SizeUniSML" validate="" required="">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium" disabled="">Medium</option>
<option value="large">Large</option>
<option value="delete">Delete</option>
</select>
But if I remove the select, then the disabled option will reappear
Question 3
How to turn off the jquery function if I have selected the option?
For example in the first select, I select medium, and then the second clone will appear. But if I modify the first select to be large, why third clone select will appear? I want when I have selected select, then do not add clones again

I would be inclined to make a clone right away and store it.
You can use jQuery methods right on a clone...even before you put it into the dom.
So you can add new option and reset the stored clone doing something like:
var $rowClone = $('.appendSML:first').clone();
$rowClone.find('select')
.append('<option value="delete">Delete</option>')
.val('')
.children()
.prop('disabled', false);
Then when you need to add a new one...make a clone of the above $rowClone.
To disable the other options, look for all the other selects using not() selector to ignore the current one
$(document).on('change', '.SizeUniSML', function(e) {
var selectval = $(this).val();
if (selectval == "delete") {
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
// clone stored row and append
var clone = $rowClone.clone();
$('.appendSMLModel').append(clone);
// disable other options with same value
$('.SizeUniSML').not(this).find('option[value="' + selectval + '"]').prop('disabled', true)
}
});
Note that ID's can't be repeated so I changed the select ID to class instead
DEMO

I've taken your fiddle and put it right in here, with a few changes and comments to explain
var clones = []; //this will hold the state for options selected so far
$(document).on('change', '.size-sml-select', function(e) {
var selectval = $(this).val(); //shorthand for getting select value
if (selectval == "delete") {
//we want to update the state to reflect the option that was just removed
$(this).find('option').each(function(){
if($(this).attr('disabled') && $(this).val()!==""){
clones.splice(clones.indexOf($(this).val()), 1);
}
});
//remove actual html
$(this).parents(".appendSML").remove();
} else if (selectval !== "") {
//if this option hasn't been chosen before
if(clones.indexOf(selectval)<0){
//add to the state array
clones.push(selectval);
var count = $('.appendSML').length;
var clone = $('.appendSML:first').clone();
var selectClone = clone.find('select');
//update the disabled status of the just selected option
selectClone.find('option').each(function(){
if(this.value===selectval){
console.log(this.value);
$(this).attr("disabled","true");
}
});
//add the delete option
selectClone.append('<option value="delete">Delete</option>');
$('.appendSMLModel').append(clone);
}
}
});
div, input, textarea, button, select, label, a {
-webkit-tap-highlight-color: transparent;
}
.row-fluid {
position: relative;
margin-left: -12px;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
line-height: 0;
}
.row-fluid>[class*="span"], span7per, span10per {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
float: left;
min-height: 1px;
padding-left: 12px;
}
.row-fluid>.span16 {
width: 100%;
}
.row-fluid>.span3 {
width: 18.75%;
}
label {
display: block;
text-align: left;
font-weight: 500;
cursor: default;
margin-bottom: 5px;
font-size: 11px;
line-height: 16px;
text-transform: capitalize;
}
.checkout-container label {
display: inline-block;
}
select {
position: relative;
width: 100%;
display: block;
font-weight: 400;
padding-left: 6px;
padding-right: 0;
text-indent: 0.01px;
text-overflow: '';
background: transparent;
border: 1px solid #777;
outline: none;
border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
min-height: 30px;
background: transparent url(https://www.ssense.com/images/dropdow-arrow-2xmargin-right.png) center right no-repeat;
background-size: 16px;
cursor: pointer;
text-transform: none;
}
select, input {
color: inherit;
font: inherit;
margin: 0;
}
form input, form select, .form input, .form select {
margin-bottom: 20px;
width: 100%;
}
:invalid {
box-shadow: none;
}
.row-fluid>.span5 {
width: 31.25%;
}
input {
height: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
border-radius: 0;
-webkit-border-radius: 0;
-ms-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-webkit-background-clip: padding;
-moz-background-clip: padding;
background-clip: padding-box;
border: 1px solid #777;
outline: 0;
min-height: 30px;
padding: 0 6px;
background: transparent;
vertical-align: top;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
-moz-appearance: none;
-o-appearance: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="AllSize SizeSML hidden2">
<div class="row-fluid appendSMLModel">
<div class="row-fluid span16 appendSML" for="0">
<div class="span3 mobileFullPhone2">
<label>Size</label>
<div class="select-container">
<select name="size_SML_select" id="SizeUniSML" validate="" required="" class="size-sml-select">
<option value="" selected="" disabled="">Select</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
<div class="span5 mobileFullPhone2">
<label>Stock</label>
<input type="text" autocomplete="off" name="size_SML_input" value="" validate="" required="">
</div>
</div>
</div>
</div>

You will find it simpler to :
create the clone unconditionally at the outset.
show/hide the clone instead of append/remove.
Also, the required behaviour of the original and cloned <select> elements is so different that they warrant their own change handlers. A common hander only complicates matters.
Something like this should do it :
jQuery(function($) {
var $originalSelect = $('#SizeUniSML');
var $originalWrapper = $originalSelect.closest('.appendSML');
// clone the wrapper unconditionally, and append, ...
var $clonedWrapper = $originalWrapper.clone().insertAfter($originalWrapper).hide();
// ... and append a "delete" option to the cloned select element
var $clonedSelect = $clonedWrapper.find('select').prop('id', '').append('<option value="delete">Delete</option>');
// attach 'change' handler to $originalSelect
$originalSelect.on('change', function(e) {
if ($(this).val() !== '') {
$clonedWrapper.show().find('select').val('')
.find('option').prop('disabled', false) // enable all options in clone
.eq(this.selectedIndex).prop('disabled', true); // disable corresponding option in clone
// (placeholder) do other stuff with selectedVal?
}
});
// attach 'change' handler to $clonedSelect
$clonedSelect.on('change', function(e) {
switch($(this).val()) {
case '':
// do nothing
break;
case 'delete':
$originalSelect.val(''); // presumably?
$clonedWrapper.hide();
break;
default:
// (placeholder) do other stuff with selectedVal?
}
});
});
Demo
If you have "other stuff" that is common to both handlers, then write a named function and call it from the placeholders.

Change the color of text in a text area using <select> and Javascript

I have a text area within a simple website, where a user can type in what they like. I would like to add a selector(Dropdown box/Combobox) to change the color of all of the text within said text area.
full code
function Text() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function Text() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
padding: 0px;
margin: auto;
display: block;
width: 10px;
height: 7px;
position: center;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid;
background-color:;
font-size: 16px;
resize: none;
}
#Button {
position: relative;
top: 450px;
left: 50px;
}
#Button {
position: relative;
top: 450px;
left: 70px;
}
#Button {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<title>Simple Word Processor</title>
</head>
<body>
<button id="Button" type="button" onclick="boldText()">Bold</button>
<button id="Button" type="button" onclick="italicText()">Italic</button>
<button id="Button" type="button" onclick="underlineText()">Underline</button>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>

Just set style.color like below.
var list = document.getElementById('textarea');
list.style.color = color;
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color = color;
}
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>

getElementById will not return an array
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea1');
list.style.color=color;
}
<textarea id="textarea1">Enter text here...</textarea>
<select id="colorChanger">
<option value="#000">black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>

Created a fiidle for you here.
Using traditional javascript:
<script type="text/javascript">
function abc(val){
document.getElementById("textarea").style.color=val;
}
</script>
<textarea id="textarea">Enter text here...</textarea>
<select id="colorChanger" onmousedown="this.value='';" onchange="abc(this.value)">
<option value="black">black</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
</select>
Updatee:
In yopu code add:
<script>
function changeColor() {
var color = document.getElementById('colorChanger').value;
document.getElementById("textarea").style.color=color;
}</script>
in the header after style tag.
also you not calling function onchange of select tag. add this in select tag.
<select id="colorChanger" onchange="changeColor()">

You combined my previous code with a comment in your question you changed my getElementById to getElementByTagName and it should be getElementsByTagName you missed the s and it will return an array whereas getElementById will return an object
function boldText() {
if(document.getElementById("textarea").style.fontWeight != 'bold')
document.getElementById("textarea").style.fontWeight = 'bold';
else
document.getElementById("textarea").style.fontWeight = 'normal';
}
function italicText() {
if(document.getElementById("textarea").style.fontStyle != 'italic')
document.getElementById("textarea").style.fontStyle = 'italic';
else
document.getElementById("textarea").style.fontStyle = 'normal';
}
function underlineText() {
if(document.getElementById("textarea").style.textDecoration != 'underline')
document.getElementById("textarea").style.textDecoration = 'underline';
else
document.getElementById("textarea").style.textDecoration = 'none';
}
document.getElementById('colorChanger').addEventListener('change', changeColor);
function changeColor() {
var color = document.getElementById('colorChanger').value;
var list = document.getElementById('textarea');
list.style.color=color;
}
body {
border: 3px solid #C0C0C0 ;
padding: 0px;
margin: auto;
display: block;
width: 1000px;
height: 700px;
position: center;
outline-style: solid;
outline-color: #f8f8f8;
outline-width: 10000px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 112px;
color: #C0C0C0;
position: relative;
top: -220px;
text-align: center;
}
textarea {
width: 90%;
height: 450px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #C0C0C0;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
position: relative;
top: -305px;
left: 50px;
}
#boldButton {
position: relative;
top: 450px;
left: 50px;
}
#italicButton {
position: relative;
top: 450px;
left: 70px;
}
#underlineButton {
position: relative;
top: 450px;
left: 90px;
}
select {
position: relative;
top: -302px;
left: 320px;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Word Processor</title>
</head>
<body>
<button id="boldButton" type="button" onclick="boldText()">Bold</button>
<button id="italicButton" type="button" onclick="italicText()">Italic</button>
<button id="underlineButton" type="button" onclick="underlineText()">Underline</button>
<canvas></canvas>
<h1> Word Processor </h1>
<form id="form">
<textarea id="textarea">Enter text here...</textarea>
</form>
<select id="colorChanger">
<option value="#000">Black</option>
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
</select>
</body>
</html>

Dropdown menu hover class not removing

The current implementation allows the use of select boxes and converts them into list items so they can be styled.
When you actually click on the dropdown menus and start hovering over the list item elements, a hover class is added to the ul. Now if the user clicks on the close button clicks on the body, it will close the dropdown and remove the hovering class.
Problem: When the user clicks on the item within the list, the hover class is not removed - until the document is clicked to close it.
var jq = jQuery.noConflict();
(function(jq) {
}(jQuery));
jq('.').selectBox();
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

As I understood you need this one.
var jq = jQuery.noConflict();
(function(jq) {
jq.fn.selectBox = function() {
// Cache the number of options
var sthis = jq(this),
numberOfOptions = jq(this).children('option').length;
// Hides the select element
if (jq('html').hasClass('touch')) {
jq('.options').addClass('s-hidden');
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.wrap('<div class="styledSelect"></div>');
} else {
sthis.addClass('s-hidden');
// Wrap the select element in a div
sthis.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
sthis.after('<div class="styledSelect"></div>');
// Cache the styled div
var styledSelect = sthis.next('div.styledSelect');
// Insert an unordered list after the styled div and also cache the list
var slist = jq('<ul />', {
'class': 'options'
}).insertAfter(styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
jq('<li />', {
text: sthis.children('option').eq(i).text(),
"data-value": sthis.children('option').eq(i).val(),
"class": sthis.children('option').eq(i).attr('class'),
"data-sku": sthis.children('option').eq(i).data('sku'),
"data-stock": sthis.children('option').eq(i).data('stock'),
"data-backorder": sthis.children('option').eq(i).data('backorder'),
"data-preorder": sthis.children('option').eq(i).data('preorder')
}).appendTo(slist);
}
// Cache the list items
var slistItems = slist.children('li');
slistItems.hover(function() {
slist.addClass('hovering');
});
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
styledSelect.click(function(e) {
e.stopPropagation();
var closeClicked = jq(this).hasClass("active");
jq('div.styledSelect.active').each(function() {
slist.removeClass('hovering');
jq(this).removeClass('active').next('ul.options').hide();
});
if (!closeClicked) {
jq(this).toggleClass('active').next('ul.options').toggle();
}
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
slistItems.click(function(e) {
e.stopPropagation();
styledSelect.text(jq(this).text()).removeClass('active');
jq(this).addClass("selected").siblings().removeClass("selected");
sthis.val(jq(this).data('value'));
sthis.addClass('THIS');
slist.removeClass('hovering').hide();
});
// Show the first select option in the styled div
if (sthis.val()) {
var currentSelect = sthis.find("option:selected").val();
styledSelect.text(sthis.find("option:selected").text());
slist.find("li[data-value='" + currentSelect + "']").each(function() {
jq(this).addClass('selected');
slist.removeClass('hovering');
});
} else {
styledSelect.text(sthis.children('option').eq(0).text());
}
// Hides the unordered list when clicking outside of it
jq(document).click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
jq('#addtoBag, .wishListBtn').click(function() {
styledSelect.removeClass('active');
slist.removeClass('hovering').hide();
});
}
};
}(jQuery));
jq('.selectBoxStyle').selectBox();
.selectSizeMain {
width: 56.77966%;
float: none;
margin: 2.1875rem auto auto;
}
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
cursor: pointer;
display: inline-block;
position: relative;
color: black;
font-family: GibsonRegular, HelveticaNeue, Helvetica, sans-serif;
font-size: 14px;
font-size: .875rem;
height: 40px;
width: 100%;
}
.styledSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 11px 13px;
border: 1px solid #ddd;
background-color: #fff;
}
.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.styledSelect.active:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: green transparent transparent transparent;
position: absolute;
top: 17px;
right: 9px;
}
.options {
display: none;
position: absolute;
max-height: 280px;
overflow-y: scroll;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
border-top: none;
background-color: white;
}
.options li {
padding: 11px 13px;
margin: 0 0;
}
.options li:hover {
background-color: #000;
color: #fff;
}
.options li.selected {
background-color: #fff;
color: #000;
}
<div class="selectSizeMain">
<select class="selectBoxStyle">
<option value="">Choose Size</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
</div>
<select class="selectBoxStyle">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>

How to design step progress bar using jquery,css

I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks

I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>

jQuery picklist: shows only one

When using the jquery picklist (from: https://code.google.com/p/jquery-ui-picklist/) I only get one list instead of 2 (left and right). Any ideas?
I almost copy pasted all from http://jsfiddle.net/awnry/ScX4S/
HTML code:
<html>
<head>
<title>TestSite</title>
<link href="./css/test.css" rel="stylesheet">
</head>
<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>
<div>
<select name="basic" id="basic" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
$("#basic").picklist();
});
CSS Code:
body { margin: 0.5em; }
.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }

In your code, Change
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
to
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
Reason : You should include reference jquery UI widget before picklist. (Check the ordering in the fiddle)
The ordering matters as picklist refers the former(jquery UI widget library) for its functionality - Reference.