Valor de Select en Input Box...

alexisfch · #1 (**permalink**) 05/02/2008, 18:06

Hola, hace un tiempo estuve buscando como darle estilo a una lista de valores (select) ej: quitarle la flecha, cambiar color de fondo, estilo de letras etc.
Pille un codigo que me fue muy util, el problema es que ahora quiero que el valor seleccionado en ese select, me lo escriba en otro campo de texto, bajo el comando OnChange, pero esto no lo hace, que estare haciendo mal?? AYUDA PLSS!!

Código HTML:

<html>
  <script type="text/javascript">
    // <![CDATA[
    function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      var opts = obj.options;
      for (var i=0; i<opts.length; i++) {
        var selectedOpt;
        if (opts[i].selected) {
          selectedOpt = i;
          break;
        } else {
          selectedOpt = 0;
        }
      }
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = opts[i].index;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        }
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            }
          }
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          }
          li.onmouseout = function() {
            this.className = 
              this.className.replace(new RegExp(" hover\\b"), '');
          }
        }
        ul.appendChild(li);
      }
      obj.parentNode.insertBefore(ul,obj);
    }
    function selectMe(obj) {
      var lis = obj.parentNode.getElementsByTagName('li');
      for (var i=0; i<lis.length; i++) {
        if (lis[i] != obj) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          }
        } else {
          setVal(obj.selectID, obj.selIndex);
          obj.className='selected';
          obj.parentNode.className = 
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
          obj.onclick = function() {
            obj.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            }
          }
        }
      }
    }
    function setVal(objID, selIndex) {
      var obj = document.getElementById(objID);
      obj.selectedIndex = selIndex;
    }
    function setForm() {
      var s = document.getElementsByTagName('select');
      for (var i=0; i<s.length; i++) {
        selectReplacement(s[i]);
      }
    }
    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    }
    // ]]>
  </script>
<head>

<title>MODO DE PAGO</title>
<?php
$dia=date("d/m/Y");
?>
<?php
$meses = array('','Enero','Febrero','Marzo','Abril','Mayo', 'Junio','Julio','Agosto','Septiembre','Octubre','N oviembre','Diciembre'); 
$registrado = date("j")." de ".$meses[date("n")]." del ".date("Y"); 
?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
  <style type="text/css">
      legend {
      font-size: 1.2em;
      font-weight: bold;
    }
    label {
      display: block;
      font-weight: bold;
      color: #fff;
    }
    select {
    }
    select.replaced {
      display: none;
    }
    ul.selectReplacement {
      background: url(http://feb05.imgshare.us/fxk.jpg) top left no-repeat;
      margin: 0;
      padding: 0;
      height: 1.65em;
      width: 150px;
    }
    ul.selectReplacement li {
      background: #ffffff;
      color: #000;
      cursor: pointer;
      display: none;
      font-size: 13px;
      line-height: 1.7em;
      list-style: none;
      margin: 0;
      padding: 1px 12px;
      width: 150px;
    }
    ul.selectOpen li {
      display: block;
    }
    ul.selectReplacement li.selected {
      background: url() bottom left no-repeat;
      color: #000;
      display: block;
    }
    ul.selectOpen li.selected {
      background: #ffffff;
      display: block;
    }
    ul.selectOpen li:hover,
    ul.selectOpen li.hover,
    ul.selectOpen li.selected:hover {
      background: #CCCCCC;
      color: #000;
    }
  </style>
<style type="text/css">

<!--

.style1 {color: #828282}
.Estilo1 {color: #000000}

-->

</style>

</head>

<body>
<form action="engranes.php" name="frm" method="post" target="_self">
  <table width="324" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="139">LISTA DE MODOS</td>
      <td width="185"><div align="center">INPUT BOX</div></td>
    </tr>
    <tr>
      <td><select name="pago1" onChange="pago3.value=this.value" id="pago1">
        <option value="FORMA PAGO">FORMADE PAGO</option>
        <option value="Efectivo">Efectivo</option>
        <option value="Vale Vista">Vale Vista</option>
        <option value="Visa">Visa</option>
        <option value="MasterCard">MasterCard</option>
        <option value="Magna">Magna</option>
        <option value="American Express">American Express</option>
        <option value="Diners Club">Diners Club</option>
        <option value="Presto Lider">Presto Lider</option>
        <option value="Otra Tarjeta">Otra Tarjeta</option>
        <option value="Transf  Bancaria.">Transf Bancaria.</option>
      </select></td>
      <td><div align="center">
        <input name="pago3" type="text" id="pago3" style="border-color:#FFFFFF; font-weight:bold; text-align:left; font-family:Arial, Helvetica, sans-serif; border-style: solid; font-size:10pt; color:#000000; letter-spacing : 0.3px" value="FORMA DE PAGO" size="14" readonly="readonly" />
      </div></td>
    </tr>
  </table>
  </form>
</body>
</html>

estoy haciendo un FORM y temo que al rescatar los valores en PHP, no me tome el value del select elegido por el usuario.

Saludos