Problemas con jquery y ajax

[mikehove]

Buenas. Resulta que puse este plugin "scrollablecombo" de jquery en mi formulario pero no funciona para enviarlo con PHP por email. Hasta acá llega mis conocimientos... si me pueden ayudar se los agradecería muchísimo...
(intenté poniendole al select el "name" para envialo por POST: tampoco)


Aquí van los códigos:

HTML:

<select id="ui_element">
<option value="Elige Provincia" selected>Elije Provincia</option>
<option value="Buenos Aires">Buenos Aires</option>
<option value="Catamarca">Catamarca</option>
<option value="Chaco">Chaco</option>
<option value="Chubut">Chubut</option>
<option value="Córdoba">Córdoba</option>
<option value="Corrientes">Corrientes</option>
<option value="Entre Rios">Entre Rios</option>
<option value="Formosa">Formosa</option>
<option value="Jujuy">Jujuy</option>
<option value="La Pampa">La Pampa</option>
<option value="La Rioja">La Rioja</option>
<option value="Mendoza">Mendoza</option>
<option value="Misiones">Misiones</option>
<option value="Neuquén">Neuquén</option>
<option value="Río Negro">Rio Negro</option>
<option value="Salta">Salta</option>
<option value="San Juan">San Juan</option>
<option value="San Luis">San Luis</option>
<option value="Santa Cruz">Santa Cruz</option>
<option value="Santa Fe">Santa Fe</option>
<option value="Sgo. del Estero">Sgo. del Estero</option>
<option value="Tierra del Fuego">Tierra del Fuego</option>
<option value="Tucumán">Tucumán</option>
</select>

CSS:

.cb_select{
width:200px;
font-family: Tahoma, Geneva, sans-serif;
font-size:15px;
}
.cb_select .cb_selectMain{
color: #000;
border:2px solid #ddd;
background-color:#f0f0f0;
background-repeat:no-repeat;
background-position:95% 50%;
cursor:pointer;
padding-left:5px;
height:23px;
line-height:22px;
width:130px;
position:absolute;
top:190px;
left:155px;
z-index:10;
text-shadow:1px 1px 1px #fff;
-moz-box-shadow:0 0 2px #333 inset;
-webkit-box-shadow:0 0 2px #333 inset;
box-shadow:0 0 2px #333 inset;
}
.cb_selectWrapper{
text-align:left;
width:150px;
display:none;
position:absolute;
top:0px;
left:0px;
z-index:1000;
height:150px;
border:2px solid #ddd;
background-color:#fff;
margin:216px 147px ;
background:#f0f0f0 url(overlay.png) repeat-x top left;
-moz-box-shadow:0px 0px 2px #333 inset;
-webkit-box-shadow:0px 0px 2px #333 inset;
box-shadow:0px 0px 2px #333 inset;
}
.cb_selectWrapper ul li a{
cursor:pointer;
display:block;
padding:0 80px;
color: #999;
font-size:16px;
height:17px;
}
.cb_selectWrapper ul li a:hover{
background-color:#616161;
color:#fff;
text-shadow:1px 1px 1px #000;
}

Js:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>// La galería jquery

Este es el código que estoy utilizando:

$(function() {
$('#ui_element').scrollablecombo();
});


//y este es el resto:

(function($) {
$.fn.scrollablecombo = function(options) {
var opts = $.extend({}, $.fn.scrollablecombo.defaults, options);
return this.each(function() {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

function findHighestZIndex(){
var divs = document.getElementsByTagName('div');
var highest = 0;
for (var i = 0; i < divs .length; i++)
{
var zindex = divs[i].style.zIndex;
if (zindex > highest) {
highest = zindex;
}
}
return highest;
}

/**
* hide the select element
* graceful degradation
*/
$this.hide();

function makeScrollable($wrapper, $container){
var extra = 50;
var wrapperHeight = $wrapper.height() ;
$wrapper.css({overflow: 'hidden'});
$wrapper.scrollTop(0);
$wrapper.unbind('mousemove').bind('mousemove',func tion(e){
var ulHeight = $container.outerHeight() + 2*extra ;
var top = (e.pageY - $wrapper.offset().top) * (ulHeight-wrapperHeight ) / wrapperHeight - extra;
$wrapper.scrollTop(top);
});
}

/**
* let's build our element structure
*/
var $ul_e = $('<ul />');

$this.find('option').each(function(){
var $option = $(this);
var liclass = '';
if($option.attr('selected'))
liclass = 'selected';
var $li_e = $('<li />',{
className : liclass,
html : '<a href="'+$option.val()+'">'+$option.html()+'</a>'
});
$ul_e.append($li_e);
});

var $wrapper_e = $('<div />',{
className : 'cb_selectWrapper'
});

$wrapper_e.append($ul_e);

var $control_e = $('<div />',{
//id : 'ui_element',
className : 'cb_selectMain cb_down'
});

var $select_e = $('<div />',{
className : 'cb_select'
});

$select_e.append($wrapper_e).append($control_e);

var $selected = $ul_e.find('.selected');


function openCombo(){
var maxzidx = Math.max(findHighestZIndex(),99999);
$wrapper_e.css('z-index',parseInt(maxzidx+1000)).show();
$control_e.addClass('cb_up').removeClass('cb_down' );
makeScrollable($wrapper_e,$ul_e);
}
function closeCombo(){
$wrapper_e.css('z-index',1000).hide();
$control_e.addClass('cb_down').removeClass('cb_up' );
}
$control_e.html($selected.find('a').html())
.bind('click',function(){
(!$wrapper_e.is(':visible'))? openCombo() : closeCombo();
}
);
$selected.hide();

$this.parent().append($select_e);
$this.remove();

$ul_e.find('a').bind('click',function(e){
var $this = $(this);
$control_e.html($this.html());
var $selected = $ul_e.find('.selected');
$selected.show().removeClass('selected');
$this.parent().addClass('selected').hide();
closeCombo();
e.preventDefault();
});



});
};
$.fn.scrollablecombo.defaults = {

};
})(jQuery);


PHP:


$mensaje="";
$mensaje.="Provincia: ".$_POST['provincia']."\n";
$email_destiny="[email protected]";

$subject="este es el asunto";

if (mail($email_destiny,$subject,$mensaje,"De: minombre<".$_POST['femail'].">")) {
echo '<p align="center">Gracias por su pedido. <br>Le enviaremos un email a su casilla<br/> para concluir la operación</br><br><br><strong>Biofusionart</strong>';
} else {
echo '<p align="center">Error '.$_POST['fname'].'</p>';
}



Les pido ayuda por favor.

mikepianist.