堆棧內存溢出
  簡體   English   中英

Javascript不適用於內部的下拉菜單中的“ onchange”事件 <div> 有“ id”的部分

[英]Javascript is not working for “onchange” event in a dropdown inside a <div> section with “id”

 原文  2016-08-01 13:47:22  7   1    javascript/ asp.net

問題描述

我有一個帶有onchange="Prueba();"的DropDownList <select> onchange="Prueba();" javascript事件。

此DropDown在<div>內部。 此<div>的id=可以從“ .js”文件接收非常復雜的Java事件（至少對我而言）。 此復雜事件會影響<select> ，從而使其行為不同於默認行為。 我想保留這種不同的行為。

問題：

此<div> ID “阻止”我的onchange="Prueba();" DropDown中的事件。

如果我拿出ID，我的事件就可以正常進行 ，但是我從.js文件中刪除了該行為，所以我不想錯過這一點。

題：

我不太習慣JavaScript。 這就是為什么我找不到解決方法。 有人可以幫我嗎？

我的活動： 

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';
                }
            }
        }

以aspx格式的DIV： 

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

腳本（在aspx文件中）： 

<script src="../js/nlform.js"></script>
    <script>
        var nlform = new NLForm(document.getElementById('nl-form'));
    </script>

NLFORM.JS文件： 

; (
    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 個解決方案

解決方案1
 0  2016-08-02 17:43:23

可能是您不是在</body>之后編寫腳本，因此，在腳本上加載頁面時，沒有定義dom對象“ nl-form”，“ Cambio”和“ Cosa”

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 下拉onchange事件不起作用 表單下拉onchange事件不起作用 JavaScript onchange事件不起作用 JavaScript onchange無法在下拉元素上使用 使用Javascript顯示/隱藏DIV部分onchange和onload 用於 HTML 中動態下拉列表的 JavaScript onchange 事件 調用下拉列表的 javascript 函數 onchange 事件 表單事件onChange不適用於下拉選擇 iframe中的下拉式onchange事件不起作用 Asp.Net Dropdown onchange事件不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM