Skip to content

Instantly share code, notes, and snippets.

@khanzf

khanzf/widget.html

Created September 14, 2015 04:41
Show Gist options
  • Save khanzf/0feaedcdf74d69d9b633 to your computer and use it in GitHub Desktop.
Save khanzf/0feaedcdf74d69d9b633 to your computer and use it in GitHub Desktop.
Download ZIP
Two Select Lists Widget
Raw
widget.html
<!--
* Copyright 2003-2007 Farhan Khan
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
-->
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="widget.js"></script>
</head>
<form>
<input type=hidden id="selected_hidden" value="3,10,11" />
<table>
<tr>
<td>
Control Pool<br/>
<select size=10 multiple id="control_pool">
<option value=1>AC-1</option>
<option value=2>AC-2</option>
<option value=4>AC-4</option>
<option value=5>AC-5</option>
<option value=15>AC-15</option>
</select>
</td>
<td>
<button type=submit id="addControl">&gt;</button><br/>
<button type=submit id="addAllControl">&gt;&gt;</button><br/>
<button type=submit id="delAllControl">&lt;&lt;</button><br/>
<button type=submit id="delControl">&lt;</button><br/>
</td>
<td>
Selected Pool<br/>
<select size=10 multiple id="control_selected">
<option value=3>AC-3</option>
<option value=10>AC-10</option>
<option value=11>AC-11</option>
</select>
</td>
</tr>
</table>
</form>
</html>
Raw
widget.js
/*
* Copyright 2003-2007 Farhan Khan
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*/
$(document).ready(function() {
// This is the add Control button
var addControl = $('#addControl');
var addAllControl = $('#addAllControl');
var delControl = $('#delControl');
var delAllControl = $('#delAllControl');
// Identify the two lists
var control_pool = $('#control_pool');
var control_selected = $('#control_selected');
// Identify the hidden list
var selected_hidden = $('#selected_hidden');
// Add All Controls
var addAllControls = function(e) {
e.preventDefault();
new_controls = "#control_pool option";
control_pool_ids = true;
addSelectControlAction(new_controls, control_pool_ids);
}
// Add Selected Control
var addSelectedControls = function(e) {
e.preventDefault();
new_controls = "#control_pool option:selected";
control_pool_ids = control_pool.val();
addSelectControlAction(new_controls, control_pool_ids);
}
// Delete Selected Control
var delSelectedControls = function(e) {
e.preventDefault();
del_controls = "#control_selected option:selected";
delSelectControlAction(del_controls);
}
// Del All Controls
var delAllControls = function(e) {
e.preventDefault();
del_controls = "#control_selected option";
delSelectControlAction(del_controls);
}
// This function adds a single control
function addSelectControlAction(new_controls, control_pool_ids) {
// If there are new controls, do this function
if ( control_pool_ids != null ) {
$(new_controls).each( function(index, value) {
cur_value = $(this).val();
cur_text = $(this).text();
tmp = $('#control_selected option');
if (tmp.length != 0) {
// Insert new element into the sorted location
tmp.each(function(key, inner_value) {
if ( Number(cur_value) < Number(inner_value.value) ) { // >
tmp.eq(key).before('<option value=' + cur_value + '>' + cur_text + '</option>');
return false;
} else if (Number(tmp.length)-1==Number(key)) {
tmp.eq(key).after('<option value=' + cur_value + '>' + cur_text + '</option>');
return false;
}
});
///////////////////////////////////////////////
} else {
control_selected.append('<option value=' + cur_value + '>' + cur_text + '</option>');
}
value.remove();
});
// Get the value of the hidden input field
original_value = selected_hidden.val();
new_value = original_value + (original_value=='' ? '' : ',' ) + control_pool_ids;
new_value_array = new_value.split(',');
// Remove duplicates
unique_new_value = new_value_array.filter(function(elem, pos) {
return new_value_array.indexOf(elem) == pos;
});
selected_hidden.val(unique_new_value);
}
}; // End of the single add control function
// This function dels a single control
function delSelectControlAction( del_controls ) {
control_selected_array = [];
original_value = selected_hidden.val();
new_value_array = original_value.split(',');
$(del_controls).each( function(index, value) {
cur_value = $(this).val();
cur_text = $(this).text();
tmp = $('#control_pool option');
if (tmp.length != 0) {
tmp.each(function(key, inner_value) {
if ( Number(cur_value) < Number(inner_value.value) ) {
tmp.eq(key).before('<option value=' + cur_value + '>' + cur_text + '</option>');
return false;
} else if ( Number(tmp.length)-1 == Number(key) ) {
tmp.eq(key).after('<option value=' + cur_value + '>' + cur_text + '</option>');
return false;
}
});
} else {
control_pool.append('<option value=' + cur_value + '>' + cur_text + '</option>');
}
value.remove();
new_value_array.splice( new_value_array.indexOf( $(this).val() ), 1);
});
selected_hidden.val(new_value_array);
};
addControl.on('click', addSelectedControls);
addAllControl.on('click', addAllControls);
delControl.on('click', delSelectedControls);
delAllControl.on('click', delAllControls);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment