Javascript is not working for “onchange” event in a dropdown inside a <div> section with “id”
Question
I have a DropDownList <select> with an onchange="Prueba();" javascript event.
This DropDown is inside a <div> . This <div> has an id= that receives a very complex (at least, for me) Javascript event, from a ".js" file. This complex event affects the <select> , giving to it a different behaviour than default. I want to conserve this different behaviour.
Problem:
This <div> ID "blocks" my onchange="Prueba();" event in the DropDown.
If I take out the ID, my event works fine , but I loose the behaviour from the .js file, and I don't want to miss that.
Question:
Im not very used to javascript. That's why I can't find how to fix this. Could anybody help me?
My event:
function Prueba() {
var Lista = document.getElementById("ListaBotones");
var Cambio1 = document.getElementById("Cambio");
var Cambio = Cambio1.options[Cambio1.selectedIndex].text;
var Cosa1 = document.getElementById("Cosa");
var Cosa = Cosa1.options[Cosa1.selectedIndex].text;
if (Cambio == "CREATE") {
if (Cosa == "LPAR") {
Lista.children[1].style.display = 'inline';
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "DEALER") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = 'inline';
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "BATCH") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = 'inline';
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
}
if (Cambio == "MODIFY") {
if (Cosa == "LPAR") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = 'inline';
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "DEALER") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = 'inline';
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "BATCH") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = 'inline';
Lista.children[9].style.display = "none";
}
}
if (Cambio == "DELETE") {
if (Cosa == "LPAR") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = 'inline';
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "DEALER") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = 'inline';
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = "none";
}
if (Cosa == "BATCH") {
Lista.children[1].style.display = "none";
Lista.children[2].style.display = "none";
Lista.children[3].style.display = "none";
Lista.children[4].style.display = "none";
Lista.children[5].style.display = "none";
Lista.children[6].style.display = "none";
Lista.children[7].style.display = "none";
Lista.children[8].style.display = "none";
Lista.children[9].style.display = 'inline';
}
}
}
DIV in aspx form:
<div id="nl-form" class="nl-form" style="text-align: center">
I want to
<select id="Cambio" onchange="Prueba();">
<option value="1" selected>CREATE </option>
<option value="2">MODIFY </option>
<option value="3">DELETE </option>
</select>
a
<select id="Cosa" onchange="Prueba();">
<option value="1" selected>LPAR</option>
<option value="2">DEALER</option>
<option value="3">BATCH</option>
</select>
Definition.
</div>
SCRIPT (in aspx file):
<script src="../js/nlform.js"></script>
<script>
var nlform = new NLForm(document.getElementById('nl-form'));
</script>
NLFORM.JS File:
; (
function (window) {
'use strict';
var document = window.document;
if (!String.prototype.trim) {
String.prototype.trim=function(){return this.replace(/^\s+|\s+$/g, '');};
}
function NLForm( el ) {
this.el = el;
this.overlay = this.el.querySelector( '.nl-overlay' );
this.fields = [];
this.fldOpen = -1;
this._init();
}
NLForm.prototype = {
_init : function() {
var self = this;
Array.prototype.slice.call( this.el.querySelectorAll( 'select' ) ).forEach( function( el, i ) {
self.fldOpen++;
self.fields.push( new NLField( self, el, 'dropdown', self.fldOpen ) );
} );
Array.prototype.slice.call( this.el.querySelectorAll( 'input' ) ).forEach( function( el, i ) {
self.fldOpen++;
self.fields.push( new NLField( self, el, 'input', self.fldOpen ) );
} );
this.overlay.addEventListener('click', function (ev) { self._closeFlds(); });
this.overlay.addEventListener( 'touchstart', function(ev) { self._closeFlds(); } );
},
_closeFlds : function() {
if( this.fldOpen !== -1 ) {
this.fields[ this.fldOpen ].close();
}
}
}
function NLField( form, el, type, idx ) {
this.form = form;
this.elOriginal = el;
this.pos = idx;
this.type = type;
this._create();
this._initEvents();
}
NLField.prototype = {
_create : function() {
if( this.type === 'dropdown' ) {
this._createDropDown();
}
else if( this.type === 'input' ) {
this._createInput();
}
},
_createDropDown : function() {
var self = this;
this.fld = document.createElement( 'div' );
this.fld.className = 'nl-field nl-dd';
this.toggle = document.createElement( 'a' );
this.toggle.innerHTML = this.elOriginal.options[ this.elOriginal.selectedIndex ].innerHTML;
this.toggle.className = 'nl-field-toggle';
this.optionsList = document.createElement( 'ul' );
var ihtml = '';
Array.prototype.slice.call( this.elOriginal.querySelectorAll( 'option' ) ).forEach( function( el, i ) {
ihtml += self.elOriginal.selectedIndex === i ? '<li class="nl-dd-checked">' + el.innerHTML + '</li>' : '<li>' + el.innerHTML + '</li>';
// selected index value
if( self.elOriginal.selectedIndex === i ) {
self.selectedIdx = i;
}
} );
this.optionsList.innerHTML = ihtml;
this.fld.appendChild( this.toggle );
this.fld.appendChild( this.optionsList );
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
this.elOriginal.style.display = 'none';
},
_createInput : function() {
var self = this;
this.fld = document.createElement( 'div' );
this.fld.className = 'nl-field nl-ti-text';
this.toggle = document.createElement( 'a' );
this.toggle.innerHTML = this.elOriginal.getAttribute( 'placeholder' );
this.toggle.className = 'nl-field-toggle';
this.optionsList = document.createElement( 'ul' );
this.getinput = document.createElement( 'input' );
this.getinput.setAttribute( 'type', 'text' );
this.getinput.setAttribute( 'placeholder', this.elOriginal.getAttribute( 'placeholder' ) );
this.getinputWrapper = document.createElement( 'li' );
this.getinputWrapper.className = 'nl-ti-input';
this.inputsubmit = document.createElement( 'button' );
this.inputsubmit.className = 'nl-field-go';
this.inputsubmit.innerHTML = 'Go';
this.getinputWrapper.appendChild( this.getinput );
this.getinputWrapper.appendChild( this.inputsubmit );
this.example = document.createElement( 'li' );
this.example.className = 'nl-ti-example';
this.example.innerHTML = this.elOriginal.getAttribute( 'data-subline' );
this.optionsList.appendChild( this.getinputWrapper );
this.optionsList.appendChild( this.example );
this.fld.appendChild( this.toggle );
this.fld.appendChild( this.optionsList );
this.elOriginal.parentNode.insertBefore( this.fld, this.elOriginal );
this.elOriginal.style.display = 'none';
},
_initEvents : function() {
var self = this;
this.toggle.addEventListener( 'click', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
this.toggle.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); ev.stopPropagation(); self._open(); } );
if( this.type === 'dropdown' ) {
var opts = Array.prototype.slice.call( this.optionsList.querySelectorAll( 'li' ) );
opts.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
el.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close( el, opts.indexOf( el ) ); } );
} );
}
else if( this.type === 'input' ) {
this.getinput.addEventListener( 'keydown', function( ev ) {
if ( ev.keyCode == 13 ) {
self.close();
}
} );
this.inputsubmit.addEventListener( 'click', function( ev ) { ev.preventDefault(); self.close(); } );
this.inputsubmit.addEventListener( 'touchstart', function( ev ) { ev.preventDefault(); self.close(); } );
}
},
_open : function() {
if( this.open ) {
return false;
}
this.open = true;
this.form.fldOpen = this.pos;
var self = this;
this.fld.className += ' nl-field-open';
},
close : function( opt, idx ) {
if( !this.open ) {
return false;
}
this.open = false;
this.form.fldOpen = -1;
this.fld.className = this.fld.className.replace(/\b nl-field-open\b/,'');
if( this.type === 'dropdown' ) {
if( opt ) {
// remove class nl-dd-checked from previous option
var selectedopt = this.optionsList.children[ this.selectedIdx ];
selectedopt.className = '';
opt.className = 'nl-dd-checked';
this.toggle.innerHTML = opt.innerHTML;
// update selected index value
this.selectedIdx = idx;
// update original select element´s value
this.elOriginal.value = this.elOriginal.children[ this.selectedIdx ].value;
}
}
else if( this.type === 'input' ) {
this.getinput.blur();
this.toggle.innerHTML = this.getinput.value.trim() !== '' ? this.getinput.value : this.getinput.getAttribute( 'placeholder' );
this.elOriginal.value = this.getinput.value;
}
}
}
// add to global namespace
window.NLForm = NLForm;
} )( window );
1 answers
solution1
0 2016-08-02 17:43:23
可能是您不是在</body>之后编写脚本，因此，在脚本上加载页面时，没有定义dom对象“ nl-form”，“ Cambio”和“ Cosa”
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
dropdown onchange event is not working
Form dropdown onchange event not working
Javascript onchange event not working
JavaScript onchange not working on dropdown element
Show/Hide DIV section onchange and onload with Javascript
JavaScript onchange event for dynamic dropdown in HTML
call javascript function onchange event of dropdown list
Form event onChange not working on dropdown selection
Dropdown onchange event within an iframe not working
Asp.Net Dropdown onchange Event Not Working
Related Tags