[zakat]

function createMessage()
{
  var container = document.createElement('div');
  container.innerHTML = '<div id="my-select"> \
    <p class="my-option">Si</p> \
    <p class="my-option">No</p> \
  </div>';

  return container.firstChild;
}

function positionMessage(elem, id)
{
	document.getElementById(id).style.borderBottom = 'none';
	pos = getElementPosition(id);
	var left = pos.left;
	var top = pos.top;
	elem.style.position = 'absolute';
	elem.style.left = left + "px";
	elem.style.top = top + 32 + "px";
}

function addCloseOnClick(messageElem, id)
{
  var p = messageElem.getElementsByTagName('P');
	var si = p[0].innerHTML;
	var no = p[1].innerHTML;

  p[0].onclick = function()
	{
		document.getElementById(id).value = si;
    messageElem.parentNode.removeChild(messageElem);
  }
	
	p[1].onclick = function()
	{
		document.getElementById(id).value = no;
    messageElem.parentNode.removeChild(messageElem);
  }
	
	p[0,1].onmouseout = function()
	{
		messageElem.parentNode.removeChild(messageElem);
	}
 
	document.getElementById(id).style.borderBottom = '1px solid #CC6600';
}


function setupMessageButton(id)
{
  var messageElem = createMessage();
  positionMessage(messageElem,id);
  addCloseOnClick(messageElem,id);
  document.body.appendChild(messageElem);
}

function getElementPosition(id)
{
	var elem = document.getElementById(id);
	var w = elem.offsetWidth;
	var h = elem.offsetHeight;
	var l = 0;
	var t = 0;
	while (elem)
	{
		l += elem.offsetLeft;
		t += elem.offsetTop;
		elem = elem.offsetParent;
	}
	return {"left":l, "top":t, "width": w, "height":h};
}

<input class="diary-field" id="federado" onClick="setupMessageButton('federado')" type="text" name="federado" value="">

ну вот такая не замысловатая иммитация тега селект. справился со всем кроме удаления элемнта после того как инпут и теги <p></p> теряют фокус. как сделать ума не приложу да и уже закрадываются сомнения возможно ли.
ЗЫ. большая часть кода взята из статей этого сайта.
ЗЫ2. в javascript баян и если можно жестоко не пинайте.