Javascript para establecer un valor de formulario oculto en el cambio desplegable: las opciones no se rellenan desde la matriz de Javascript

StackOverflow https://stackoverflow.com/questions/1619372

  •  06-07-2019
  •  | 
  •  

Pregunta

Tengo un código Javascript que crea 2 matrices: una para la categoría de producto y otra para el producto.

Pero antes de que el usuario pueda elegir la Categoría de producto o el Producto, debe elegir el tipo de Campaña que desea utilizar. Por lo tanto, la selección (evento) de la 'Campaña', activa el menú desplegable oculto desde el cual se elige la categoría de producto. Una vez que se elige la categoría del producto, el menú desplegable del producto se llena y el usuario puede elegir entre las opciones apropiadas.

Mi único problema: la categoría de producto no se llena correctamente. Las opciones son invisibles, pero una vez que selecciono una, el menú desplegable Opciones de producto se completa en consecuencia. Estoy súper confundido ...

Aquí está el código JScript: 

<script type="text/javascript">

var info = new Array(
 "Select One*Select One|Select One",
 "Mortgage*1yr NegAm|3yr ARM|5yr ARM|7yr ARM|15yr FRM|30yr FRM",
 "Home Equity*HELoan|HELOC|Convertible",
 "Credit Card*Standard|Premium|Charge|Limited|Secured|Pre-Paid|Business",
 "Student Loan*Subsidized|Unsubsidized|Undergrad|Graduate|Refi",
 "Auto Loan*Purchase|Lease|Used|Dealer"
);

function stringSplit ( string, delimiter ) { 
    if ( string == null || string == "" ) { 
        return null; 
    } else if ( string.split != null ) { 
        return string.split ( delimiter ); 
    } 
} 

var menu1 = new Array();
var menu2 = new Array();

function createMenus() {

    for ( var i=0; i < info.length; i++ ) {
  menu1[i] = stringSplit ( info[i], '*' );
        menu2[i] = stringSplit ( menu1[i][1], '|' );
    }

 var b = document.selector.dropnum.options[document.selector.dropnum.options.selectedIndex].value;

 var myFormx = myForm + b;

 var prodcat = document.myFormx.main;
    var product = document.myFormx.title;

    prodcat.length = menu1.length;
    product.length = menu2[0].length;  

    for ( var i=0; i < menu1.length; i++ ) {
         prodcat.options[i].value  = menu1[i][0];
         prodcat.options[i].text   = menu1[i][0];
    }
    document.myFormx.main.selected = 0;

    for (var x=0; x < menu2[0].length; x++) {
         product.options[x].text = menu2[0][x];
         product.options[x].value = menu2[0][x];
    }
    document.myFormx.title.selected = 0;
}

function updateMenus ( what ) {
    var sel = what.selectedIndex;

    if ( sel >= 0 && sel < menu1.length ) 
        var temp = menu2[sel];
    else
        var temp = new Array ();

    what.form.title.length = temp.length;

    for ( var i = 0; i < temp.length; i++ ) {
        what.form.title.options[i].text  = temp[i];
        what.form.title.options[i].value = temp[i];
    }
    what.form.title.selected=0;
}
</script>

Aquí está el código de mi archivo .php: 

<html>
<body onLoad="createMenus()">

<br>
<br>

<form name="selector" action="#" method="post">       <!-- This is where you add a link to the 'Dials' tab -->
Select the Campaign methodology to model:

<select id='campnum' name='dropnum' class='css_button_example' onChange="javascript: ShowMenu(document.getElementById('campnum').value, 'camp', 5);">
        <option value='0'>Select Campaign
        <option value='1'>Retention Campaign
        <option value='2'>Acquisition Campaign
        <option value='3'>Cross-Sell Campaign
        <option value='4'>Up-Sell Campaign
</select>
</form>

<div name="newboxes" id="camp0" style="display: none;" href="javascript:showonlyone('camp0');">
</div>

<!--*************************************************Retention Campaign************************************************--> 
<div name="newboxes1" id="camp1" style="display: none;" href="javascript:showonlyone('camp1');">
 <form name="myForm1"><p>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Product Category:&nbsp;
 <select name="main" size=1 onChange="updateMenus(this)">
 <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <option>
 <option>
 </select>

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Product:&nbsp;
 <select name="title" size=1>
 <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 <option>
 <option>
 </select>
 </form>
</div>

</body>
</html>

Saludos,

Vijay

¿Fue útil?

Solución

" href " atributo en div no tiene sentido: 

<div href="javascript:showonlyone

Y onChange = " javascript: ... " es incorrecto: el valor de onchange debe ser solo código JS, no " javascript: " prefijo.

¿Dónde se define ShowMenu?

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top