jsFiddle GitHub

by John Schulz

HTML

<!-- forked from http://jsfiddle.net/JFSIII/7SfYk/49/ -->
<div id="display"></div>
<hr/>

<div>
    <select name="js_wrap" id="js_wrap">
        <option value="no-head" selected="1">no wrap (head)</option>
        <option value="no-body">no wrap (body)</option>
        <option value="onDom">onDomReady</option>
        <option value="onLoad">onLoad</option>
    </select>
</div>
<div>
    <select name="js_lib" id="js_lib">
        <optgroup label="Mootools">
            <option value="MootoolsCompact/1.3">Mootools Core 1.3 (compat)</option>
            <option value="Mootools/1.3">Mootools Core 1.3</option>
            <option value="Mootools/1.2.5">Mootools Core 1.2.5</option>
            <option value="Mootools/1.1.2">Mootools Core 1.1.2</option>
        </optgroup>
        <optgroup label="jQuery">
            <option value="jQuery/1.5">jQuery 1.5</option>
            <option value="jQuery/1.4.4" selected="selected">jQuery 1.4.4</option>
            <option value="jQuery/1.4.2">jQuery 1.4.2</option>
            <option value="jQuery/1.3.2">jQuery 1.3.2</option>
            <option value="jQuery/1.2.6">jQuery 1.2.6</option>
            <option value="jQuery/0">jQuery 0 GIT</option>
        </optgroup>
        <optgroup label="Prototype">
            <option value="Prototype/1.7">Prototype 1.7</option>
            <option value="Prototype/1.6.1.0">Prototype 1.6.1.0</option>
        </optgroup>
        <optgroup label="YUI">
            <option value="YUISimple/3.2.0">YUI Simple 3.2.0</option>
            <option value="YUI/3.3.0">YUI 3.3.0</option>
            <option value="YUI/3.2.0">YUI 3.2.0</option>
            <option value="YUI/2.8">YUI 2.8.0r4</option>
        </optgroup>
        <optgroup label="Glow">
            <option value="Glow/1.7">Glow Core 1.7.0</option>
        </optgroup>
        <optgroup label="No-Library">
            <option value="">No-Library (pure JS)</option>
        </optgroup>
        <optgroup label="Dojo">
            <option...

CSS

body{font-family:verdana; font-size:12px; color:#333;}
input{margin:5px 5px 5px 10px;}
select{width:150px; margin:5px 5px 5px 10px;}
#display{font-weight:bold;}

JavaScript

var base = "http://jsfiddle.net/gh/get";
var $dependencies = $('#js_dependency').children();
var $js_lib = $("#js_lib");
var $display = $("#display");
var $git_path = $("#gitPath");
var path, framework, dependencies;

$(":input").bind('change', displayPath);
displayPath();

function displayPath(e) 
{
    var $selected = $js_lib.find(":selected");
    var new_framework = $selected.parent().attr('label');
    var version = $selected.val();
    var parts = [base, version];

    if (framework != new_framework){
        framework = new_framework;        
        $dependencies.find(':checkbox').attr('checked', false);
    }
    
    dependencies = $dependencies.find(":checked:visible")
            .map(function() { return this.value; })
            .toArray()
            .join(',');

    $dependencies.hide().filter('.' + framework).show();
    if (dependencies) parts.push(dependencies);
    parts.push($git_path.val());
    path = parts.join('/');
    $display.text(path);
}