(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.
