noodlehaus/dd-editable.html

## dd-editable.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<div><span id="host1">mysql-a</span>.protego.com</div>
<div><span id="host2">mysql-a</span>.protego.com</div>
<div><span id="host3">mysql-a</span>.protego.com</div>
<div><span id="host4">mysql-a</span>.protego.com</div>

</body>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
/**
 * editable drop down plugin
 */
(function ($) {
  $.fn.ddedit = function (opts) {

    if (opts == null)
      opts = { values: [] };

    var $o = this;

    $o.html(
      '<span class="dd-editable"><span>' + opts.values[0] + '</span>' +
      '<select></select></span>'
    );

    var $s = $o.find('select'),
        $t = $o.find('.dd-editable span');

    for (var i in opts.values)
      $s.append('<option value="' + i + '">' + opts.values[i] + '</option>');

    if (typeof opts.selected == 'undefined')
      $t.html($s.find('option:first').attr('selected', true).text());
    else
      $t.html($s.find('option[value="' + opts.selected + '"]').attr('selected', true).text());

    $s.change(function () {
      var $v = $s.find('option:selected').val(),
          $k = $s.find('option:selected').text();
      $t.text($k);
      if (typeof opts.change == 'function')
        opts.change($v, $k);
    });

    $o.click(function () {
      $s.show().focus();
      $t.hide();
    });

    $s.blur(function () {
      var $v = $s.find('option:selected').val(),
          $k = $s.find('option:selected').text();
      $s.hide();
      $t.show();
      if (typeof opts.blur == 'function')
        opts.blur($v, $k);
    });

    $s.hide();
    $t.show();
  };
})(jQuery);
/** end fo plugin **/

$(function () {

  for (var i = 1, n = 4; i <= n; ++i) {
    $('#host' + i).ddedit({
      values: {
        '1': 'mysql-a',
        '2': 'mysql-b',
        '3': 'mysql-c'
      },
      selected: '2',
      change: function (val, text) {
        console.log('changed with value = ' + val + ' and text = ' + text);
      },
      blur: function (val, text) {
        console.log('blurred with value = ' + val + ' and text = ' + text);
      }
    });
  }
});

</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<div><span id="host1">mysql-a</span>.protego.com</div>
	<div><span id="host2">mysql-a</span>.protego.com</div>
	<div><span id="host3">mysql-a</span>.protego.com</div>
	<div><span id="host4">mysql-a</span>.protego.com</div>

	</body>
	<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script>
	/**
	* editable drop down plugin
	*/
	(function ($) {
	$.fn.ddedit = function (opts) {

	if (opts == null)
	opts = { values: [] };

	var $o = this;

	$o.html(
	'<span class="dd-editable"><span>' + opts.values[0] + '</span>' +
	'<select></select></span>'
	);

	var $s = $o.find('select'),
	$t = $o.find('.dd-editable span');

	for (var i in opts.values)
	$s.append('<option value="' + i + '">' + opts.values[i] + '</option>');

	if (typeof opts.selected == 'undefined')
	$t.html($s.find('option:first').attr('selected', true).text());
	else
	$t.html($s.find('option[value="' + opts.selected + '"]').attr('selected', true).text());

	$s.change(function () {
	var $v = $s.find('option:selected').val(),
	$k = $s.find('option:selected').text();
	$t.text($k);
	if (typeof opts.change == 'function')
	opts.change($v, $k);
	});

	$o.click(function () {
	$s.show().focus();
	$t.hide();
	});

	$s.blur(function () {
	var $v = $s.find('option:selected').val(),
	$k = $s.find('option:selected').text();
	$s.hide();
	$t.show();
	if (typeof opts.blur == 'function')
	opts.blur($v, $k);
	});

	$s.hide();
	$t.show();
	};
	})(jQuery);
	/ end fo plugin /

	$(function () {

	for (var i = 1, n = 4; i <= n; ++i) {
	$('#host' + i).ddedit({
	values: {
	'1': 'mysql-a',
	'2': 'mysql-b',
	'3': 'mysql-c'
	},
	selected: '2',
	change: function (val, text) {
	console.log('changed with value = ' + val + ' and text = ' + text);
	},
	blur: function (val, text) {
	console.log('blurred with value = ' + val + ' and text = ' + text);
	}
	});
	}
	});

	</script>
	</html>