noodlehaus · December 11, 2015 23:49
diff --git a/dd-editable.html b/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>