以动态形式隐藏选择元素的问题

时间：2019-07-22 17:21:48

标签： javascript html forms dynamic

这应该是一个动态的逐步移动表单，并且行为不正常。 如果用户选择一个属性为“ data-idToShow”的选项，则“ data-idToShow”的值通过id代表以下标签之一，然后获取 类“ displayNone”已删除并变为可见。这可以按预期工作。

但是，如果用户更改了先前的元素之一，则所有初始的元素都应重置并重新隐藏。 我编辑了所有内容以使代码在此处运行，并希望获得一些建议。

HTMLElement.prototype.hasClass = function( c ) {
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] == c) {
            return true;
        }
    }
    return false;
};
HTMLElement.prototype.addClass = function( a) {
    if (!this.hasClass(a)){
        this.className = (this.className + " " + a).trim();
    }
};
HTMLElement.prototype.removeClass = function( r ) {
    var newClassName = "";
    var i;
    var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== r) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName.trim();
};
function hideAllLabels( ) {
    var els = document.querySelectorAll('form#categorySelection > label:nth-of-type(1n+2)');
    for(var i = 0; i < els.length; i++)  {
        var e = els[i];
        if( !e.hasClass('displayNone') ){
            e.addClass('displayNone');
        }
    }
}
function unselectFollowingElements( e ) {
    var nextEl = e.parentElement;
    if( !nextEl.hasClass('unselectStart') ){
        nextEl.addClass('unselectStart');
    }
    var els = document.querySelectorAll('form#categorySelection > label.unselectStart ~ label');
    for(var i = 0; i < els.length; i++) {
        var e = els[i].children[0];
        e.selectedIndex = 0;
    }
    if( nextEl.hasClass('unselectStart') ){
        nextEl.removeClass('unselectStart');
    }
}
function showId( id ) {
    var e = document.getElementById( id );
    if( e.hasClass('displayNone') ){
        e.removeClass('displayNone');
    }
}
(function categorySelection() {
    var f = document.getElementById( "categorySelection" );
    f.onchange = function() {
        var els = document.querySelectorAll('form#categorySelection > label > select > option');
        hideAllLabels();
        for(var i = 0; i < els.length; i++) {
            var e = els[i];
            var idToShow = e.getAttribute('data-idToShow');
            if( e.selected === true && idToShow !== null ) {
                showId(idToShow);
            }
        }
    }
    var els = document.querySelectorAll('form#categorySelection > label > select');
    for(var i = 0; i < els.length; i++) {
        var e = els[i];
        e.onchange = function() {
            unselectFollowingElements(this);
        }
    }
})();
<style>
    .displayNone {
        display: none;
    }
</style>

<form id=categorySelection>
  <label>
            <select>
                <option value="" disabled selected>SELECT CAT</option>
                <option data-idToShow=test1>CAT</option>
            </select>
        </label>
  <label id=test1 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option data-idToShow=catSelect1>CAT 1</option>
                <option>Webseiten</option>
            </select>
        </label>
  <label id=catSelect1 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option data-idToShow=catSelect2>CAT 1</option>
                <option>CAT X</option>
                <option>CAT Y</option>
            </select>
        </label>
  <label id=catSelect2 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT a</option>
                <option>CAT b</option>
                <option>CAT c</option>
                <option data-idToShow=catSelect3>CAT D</option>
                <option>CAT</option>
                <option>CAT</option>
                <option data-idToShow=catSelect4>CAT</option>
            </select>
        </label>
  <label id=catSelect4 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option data-idToShow=catSelect5>CAT</option>
            </select>
        </label>
  <label id=catSelect5 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>Bitte wähle die Art des Kurses</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
</form>

1 个答案:

答案 0 :(得分：0)

最后使它起作用。那真是艰难！棘手的，但是有效。到目前为止，Havent尚未发现任何问题。

HTMLElement.prototype.hasClass = function( c ) {
    var i;
    var classes = this.className.split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] == c) {
            return true;
        }
    }
    return false;
};
HTMLElement.prototype.addClass = function( a) {
    if (!this.hasClass(a)){
        this.className = (this.className + " " + a).trim();
    }
};
HTMLElement.prototype.removeClass = function( r ) {
    var newClassName = "";
    var i;
    var classes = this.className.replace(/\s{2,}/g, ' ').split(" ");
    for(i = 0; i < classes.length; i++) {
        if(classes[i] !== r) {
            newClassName += classes[i] + " ";
        }
    }
    this.className = newClassName.trim();
};
function hideAllLabels( ) {
    var els = document.querySelectorAll('form#categorySelection > label:nth-of-type(1n+2)');
    for(var i = 0; i < els.length; i++)  {
        var e = els[i];
        if( !e.hasClass('displayNone') ){
            e.addClass('displayNone');
        }
    }
}
function unselectFollowingElements( e ) {
    var nextEl = e.parentElement;
    if( !nextEl.hasClass('unselectStart') ){
        nextEl.addClass('unselectStart');
    }
    var els = document.querySelectorAll('form#categorySelection > label.unselectStart ~ label');
    for(var i = 0; i < els.length; i++) {
        var e = els[i].children[0];
        e.selectedIndex = 0;
    }
    if( nextEl.hasClass('unselectStart') ){
        nextEl.removeClass('unselectStart');
    }
}
function showId( id ) {
    var e = document.getElementById( id );
    if( e.hasClass('displayNone') ){
        e.removeClass('displayNone');
    }
}
(function categorySelection() {
    var f = document.getElementById( "categorySelection" );
    f.onchange = function() {
        var els = document.querySelectorAll('form#categorySelection > label > select > option');
        hideAllLabels();
        for(var i = 0; i < els.length; i++) {
            var e = els[i];
            var idToShow = e.getAttribute('data-idToShow');
            if( e.selected === true && idToShow !== null ) {
                showId(idToShow);
            }
        }
    }
    var els = document.querySelectorAll('form#categorySelection > label > select');
    for(var i = 0; i < els.length; i++) {
        var e = els[i];
        e.onchange = function() {
            unselectFollowingElements(this);
        }
    }
})();
<style>
    .displayNone {
        display: none;
    }
</style>

<form id=categorySelection>
  <label>
            <select>
                <option value="" disabled selected>SELECT CAT</option>
                <option data-idToShow=test1>CAT</option>
            </select>
        </label>
  <label id=test1 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option data-idToShow=catSelect1>CAT 1</option>
                <option>Webseiten</option>
            </select>
        </label>
  <label id=catSelect1 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option data-idToShow=catSelect2>CAT 1</option>
                <option>CAT X</option>
                <option>CAT Y</option>
            </select>
        </label>
  <label id=catSelect2 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT a</option>
                <option>CAT b</option>
                <option>CAT c</option>
                <option data-idToShow=catSelect3>CAT D</option>
                <option>CAT</option>
                <option>CAT</option>
                <option data-idToShow=catSelect4>CAT</option>
            </select>
        </label>
  <label id=catSelect4 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option data-idToShow=catSelect5>CAT</option>
            </select>
        </label>
  <label id=catSelect5 class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>PLEASE SELECT</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
  <label id=catSelectXXX class=displayNone>
            <select>
                <option value="" disabled selected>Bitte wähle die Art des Kurses</option>
                <option>CAT</option>
                <option>CAT</option>
                <option>CAT</option>
            </select>
        </label>
</form>

相关问题
最新问题