Javascript 选择“不工作”

我正在用HTML5创建一个比较表。它有两个选项卡，一个用于APP1 vs APP2，另一个用于APP1 vs APP3。我已经为此使用了tabulus.js

我的select元素有问题。每当切换到下一个选项卡时，我的第一个select元素（select id=“leave”）就不再工作了。我不能选择它。在li id=“hello”上输入文本值时，我也遇到了问题。当我键入APP3时，我无法再次选择select id=“leave”

希望有人能帮助我

下面是我的HTML5代码

<div id="wrapper">

            <div id="tabs">
    <ul>
        <li><a href="#tabs-1" title="">Tab1</a></li>
        <li><a href="#tabs-2" title="" onclick = "changeTOS2()">Tab2</a></li>

    </ul>

    <div id="tabs_container">

    <div id="tabs-1" onchange = "changeTOS()">  

    <span id = "container_panel">           
        <span class="whole">
                <span class="type1">
                <p></p>
                </span>
                <span class="plan1">


                    <span class="content0">

                        <ul>

                            <li  class = "liLabel">C1</li>
                            <li  class = "liLabel">C2</li>
                            <li  class = "liLabel">C3</li>
                            <li class = "liLabel">C4</li>
                            <li class = "liLabel">C5</li>
                            <li class = "liLabel">C6</li>
                            <li class = "liLabel">C7</li>
                            <li class = "liLabel">C8</li>
                            <li  class = "liLabel" id ="e">C9 </li>
                        </ul>
                    </span>
                </span>
        </span>

        <span class="whole1">

        <span class="plan">

            <span class="content1">
                <ul>
                        <li><img class = "j" src = "img/jd_edit.png"/></li>
                        <li class = "liLabel0">APP</li>
                        <li id = "tos" class = "ulLabel"></li>
                        <li id = "JD_2" class = "ulLabel">
                             <select id="leave">
                                  <option value="2500" selected>2500</option>
                                  <option value="2600">2600</option>
                            </select>
                        </li>
                        <li id = "JD_13"  class = "ulLabel"></li>


                        <li id = "priceDif" class = "ulLabel">

                            <select id="leave2">
                                  <option value="5000" >5000</option>
                                  <option value="14000" selected>14000</option>
                            </select>
                        </li>

                        <li id = "JD_15" class = "ulLabel"></li>

                        <li id = "JD_16" class = "ulLabel">
                            <select id="leave3">
                                  <option value="2" >2</option>
                                  <option value="3" selected>3</option>
                            </select>
                        </li>

                        <li id = "JD_17" class = "ulLabel"></li>
                        <li id = "JD_18" class = "ulLabel"></li>
                        <li id="costEff1" class = "ulLabel">1</li>
                    </ul>
            </span>

        </span>
        </span>

        <span class="whole2">

        <span class="plan">

            <span class="content1">
                <ul>
                        <li><img class = "j" src = "img/k_edit.png"/></li>
                        <li class = "liLabel0">APP2</li>
                        <li id = "tos1" class = "ulLabel"></li>
                        <li id = "K_22" class = "ulLabel">

                        </li>
                        <li id = "K_23" class = "ulLabel"></li>


                        <li id = "priceDif" class = "ulLabel">
                            .
                        </li>

                        <li id = "K_25" class = "ulLabel"></li>

                        <li id = "K_26" class = "ulLabel">

                        </li>

                        <li id = "K_27" class = "ulLabel"></li>
                        <li id = "K_28" class = "ulLabel"></li>
                        <li id="costEff2" class = "ulLabel">&nbsp;</li>
                    </ul>
            </span>

        </span>
        </span>





    </span> 
    </div>

    <div id="tabs-2">
        <span id = "container_panel">           
        <span class="whole">
                <span class="plan1">
                    <span class="content0">
                        <ul>
                            <li>&nbsp;</li>
                            <li>&nbsp;</li>
                            <li class = "liLabel">C1</li>
                            <li class = "liLabel">C2</li>
                            <li class = "liLabel">C3</li>
                            <li class = "liLabel">C4</li>
                            <li class = "liLabel">C5</li>
                            <li class = "liLabel">C6</li>
                            <li class = "liLabel">C7</li>
                            <li class = "liLabel">C8</li>
                            <li class = "liLabel">C9 </li>
                            </ul>
                    </span>
                </span>
        </span>

        <span class = "whole">
            <span class = "plan1">
                <span class = "content0">
                    <ul>
                        <li>&nbsp;</li>
                        <li class = "liLabel0">APP1</li>
                        <li id = "john1" class = "ulLabel">1</li>
                        <li id = "john2" class = "ulLabel">
                            <select id = "numBales2" onchange = "changeTOS2()">
                                <option value = "2500" selected>2500</option>
                                <option value = "2600">2600</option>
                            </select>

                        </li>

                        <li id = "john3" class = "ulLabel">3</li>
                        <li id = "john4" class = "ulLabel">
                            <select id = "balerPrice2">
                                <option value = "5000">5000</option>
                                <option value = "10000" selected>10000</option>
                            </select>

                        </li>
                        <li id = "john5" class = "ulLabel">5</li>
                        <li id = "john6" class = "ulLabel">
                            <select id = "baleMin2">
                                <option value = "2">2</option>
                                <option value = "3" selected>3</option>
                            </select>

                        </li>
                        <li id = "john7" class = "ulLabel">7</li>
                        <li id = "john8" class = "ulLabel">8</li>
                        <li id = "john9" class = "ulLabel">9</li>
                    </ul>
                </span>

            </span>

        </span>

        <span class = "whole">
            <span class = "plan">
                <span class = "content1">
                    <ul class = "ulClass">
                        <li id = "imgKrone"></li>
                        <li id = "hello">APP3</li>
                        <li id = "krone1" class = "kroneC">2</li>
                        <li id = "krone2" class = "kroneC">2</li>
                        <li id = "krone3" class = "kroneC">2</li>
                        <li id = "krone4" class = "kroneC">2</li>
                        <li id = "krone5" class = "kroneC">2</li>
                        <li id = "krone6" class = "kroneC">2</li>
                        <li id = "krone7" class = "kroneC">2</li>
                        <li id = "krone8" class = "kroneC">2</li>
                        <li id = "krone9" class = "kroneC">2</li>
                    </ul>
                </span>
            </span>
        </span>
    </span> 
    </div>
    </div><!--End tabs container--> 
</div><!--End tabs-->

</div>

C1
C2
C3
C4
C5
C6
C7
C8
C9



应用程序


2500
2600



5000
14000



2.
3.



1



APP2





.











C1
C2
C3
C4
C5
C6
C7
C8
C9



APP1
1

2500
2600

3

5000
10000

5

2.
3.

7
8
9



APP3
2
2
2
/*!
* strength.js
* Original author: @aaronlumsden
* Further changes, comments: @aaronlumsden
* Licensed under the MIT license
*/
;(function ( $, window, document, undefined ) {

var pluginName = "tabulous",
    defaults = {
        effect: 'scale'
    };

   // $('<style>body { background-color: red; color: white; }</style>').appendTo('head');

function Plugin( element, options ) {
    this.element = element;
    this.$elem = $(this.element);
    this.options = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

Plugin.prototype = {

    init: function() {

        var links = this.$elem.find('a');
        var firstchild = this.$elem.find('li:first-child').find('a');
        var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');

        if (this.options.effect == 'scale') {
         tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
        } else if (this.options.effect == 'slideLeft') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
        } else if (this.options.effect == 'scaleUp') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
        } else if (this.options.effect == 'flip') {
             tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
        }

        var firstdiv = this.$elem.find('#tabs_container');
        var firstdivheight = firstdiv.find('div:first').height();

        var alldivs = this.$elem.find('div:first').find('div');

        alldivs.css({'position': 'absolute','top':'40px'});

        firstdiv.css('height',firstdivheight+'px');

        firstchild.addClass('tabulous_active');

        links.bind('click', {myOptions: this.options}, function(e) {
            e.preventDefault();

            var $options = e.data.myOptions;
            var effect = $options.effect;

            var mythis = $(this);
            var thisform = mythis.parent().parent().parent();
            var thislink = mythis.attr('href');


            firstdiv.addClass('transition');

            links.removeClass('tabulous_active');
            mythis.addClass('tabulous_active');
            thisdivwidth = thisform.find('div'+thislink).height();

            if (effect == 'scale') {
                alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
                thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
            } else if (effect == 'slideLeft') {
                alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
                thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
            } else if (effect == 'scaleUp') {
                alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
                thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
            } else if (effect == 'flip') {
                alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
                thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
            }


            firstdiv.css('height',thisdivwidth+'px');




        });



    changeTOS();



    },

    yourOtherFunction: function(el, options) {
        // some logic
    }
};

// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        new Plugin( this, options );
    });
};

})( jQuery, window, document );



function changeTOS() {
    var tos = document.getElementById("tos");
    var title = document.getElementById("hello");
    //var krone = "KRONE";
    //title.innerHTML = krone;
    valSelected = parseFloat(document.getElementById("leave").value); 
    valSelected2 = parseFloat(document.getElementById("leave2").value); 
    valSelected3 = parseFloat(document.getElementById("leave3").value); 
    //alert(valSelected2);
    tos.innerHTML = parseFloat(valSelected * 258.9596612 / 1000).toFixed(0); 
    changeContentK(tos.innerHTML, valSelected2, valSelected3);
    changeContentJD(tos.innerHTML, valSelected, valSelected2, valSelected3);
    computeCostEff();

 }


function changeContentK(tos, valSelected2, valSelected3) {
document.getElementById("K_22").innerHTML = ((tos / 227.1707391) * 1000).toFixed(0);
valSelected2 = 0;
document.getElementById("K_23").innerHTML = (parseFloat((0.73*document.getElementById("K_22").innerHTML)+(0.5*document.getElementById("K_22").innerHTML)+((tos/18.43349503)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("K_25").innerHTML = (parseFloat(document.getElementById("K_23").innerHTML) + valSelected2 + 30900 / 10).toFixed(0) ;
document.getElementById("K_27").innerHTML = ((parseFloat(document.getElementById("K_22").innerHTML) * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).toFixed(0);
document.getElementById("K_28").innerHTML = (parseFloat(document.getElementById("K_27").innerHTML) + parseFloat(document.getElementById("K_25").innerHTML)).toFixed(0);
}

function changeContentJD(tos, valSelected, valSelected2, valSelected3) {
document.getElementById("JD_13").innerHTML = (parseFloat((0.73*valSelected)+(0.5*valSelected)+((tos/20.1922655)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("JD_15").innerHTML = (parseInt(document.getElementById("JD_13").innerHTML) + valSelected2 / 10 + 30900 / 10).toFixed(0) ;
document.getElementById("JD_17").innerHTML = (parseFloat((valSelected * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).toFixed(0);
document.getElementById("JD_18").innerHTML = (parseFloat(document.getElementById("JD_17").innerHTML) + parseFloat(document.getElementById("JD_15").innerHTML)).toFixed(0);
}

function computeCostEff(){
document.getElementById("costEff1").innerHTML = (((parseFloat(document.getElementById("K_28").innerHTML) - parseFloat(document.getElementById("JD_18").innerHTML))/parseFloat(document.getElementById("K_28").innerHTML))*100).toFixed(1); 
if (document.getElementById("costEff1").innerHTML < 0){
    document.getElementById("costEff1").style.color = "black";
    document.getElementById("costEff1").style.backgroundColor = "#ebebeb";
    document.getElementById("costEff2").style.backgroundColor = "#ebebeb";

}else{
    document.getElementById("costEff1").style.color = "white";
    document.getElementById("costEff1").style.backgroundColor = "#367c2b";
    document.getElementById("costEff2").style.backgroundColor = "#367c2b";
}
}


function changeTOS2() {
    var atos = document.getElementById("john1");
    var avalSelected = parseFloat(document.getElementById("numBales2").value); 
    var avalSelected2 = parseFloat(document.getElementById("balerPrice2").value); 
    var avalSelected3 = parseFloat(document.getElementById("baleMin2").value); 
    //alert(valSelected2);
    atos.innerHTML = parseFloat(avalSelected * 258.9596612 / 1000); 
    changeContentK2(atos.innerHTML, avalSelected2, avalSelected3);
    changeContentJD2(atos.innerHTML, avalSelected, avalSelected2, avalSelected3);
    computeCostEff2();
}


function changeContentK2(tos, valSelected2, valSelected3) {
document.getElementById("krone2").innerHTML = ((tos / 245.7729751) * 1000).toFixed(0);
valSelected2 = 0;
document.getElementById("krone3").innerHTML = (parseFloat((0.73*document.getElementById("krone2").innerHTML)+(0.5*document.getElementById("krone2").innerHTML)+((tos/17.45667132)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("krone5").innerHTML = (parseFloat(document.getElementById("krone3").innerHTML) + valSelected2 + 30900 / 10).toFixed(0) ;
document.getElementById("krone7").innerHTML = ((parseFloat(document.getElementById("krone2").innerHTML) * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16)).toFixed(0);
document.getElementById("krone8").innerHTML = (parseFloat(document.getElementById("krone7").innerHTML) + parseFloat(document.getElementById("krone5").innerHTML)).toFixed(0);
}

function changeContentJD2(tos, valSelected, valSelected2, valSelected3) {
document.getElementById("john3").innerHTML = (parseFloat((0.73*valSelected)+(0.5*valSelected)+((tos/20.1922655)*(15.3+7.8+16)))).toFixed(0);
document.getElementById("john5").innerHTML = (parseInt(document.getElementById("john3").innerHTML) + valSelected2 / 10 + 30900 / 10).toFixed(0) ;
document.getElementById("john7").innerHTML = (parseFloat((valSelected * (valSelected3 / 60)) * (12.2 + 4.5 + 6.1 + 16))).toFixed(0);
document.getElementById("john8").innerHTML = (parseFloat(document.getElementById("john7").innerHTML) + parseFloat(document.getElementById("john5").innerHTML)).toFixed(0);
}

function computeCostEff2(){
document.getElementById("john9").innerHTML = (((parseFloat(document.getElementById("krone8").innerHTML) - parseFloat(document.getElementById("john8").innerHTML))/parseFloat(document.getElementById("krone8").innerHTML))*100).toFixed(1); 
if (document.getElementById("john9").innerHTML < 0){
    document.getElementById("john9").style.color = "black";
    document.getElementById("john9").style.backgroundColor = "#ebebeb";
    document.getElementById("krone9").style.backgroundColor = "#ebebeb";

}else{
    document.getElementById("john9").style.color = "white";
    document.getElementById("john9").style.backgroundColor = "#367c2b";
    document.getElementById("krone9").style.backgroundColor = "#367c2b";
}
}