jquery .live('change')带回了狡猾的结果

时间:2011-07-05 11:56:03

标签: javascript jquery html

我的页面上有几个下拉框,我要做的是获取已更改的值,当它被更改时。但是发生的事情是我只获得了第一个下拉框的值。

这是他们的添加方式:

$(".payCell1").each(function(i, data)
{
    $(this).html("<select id='selection"+i+"' class='selectoror' style='width:167px'><option></option><option>Energy Efficient Lighting Systems</option><option>Lighting and Associated Systems</option><option>Efficient Lighting in Poultry & Green houses</option><option>Advanced Lighting Technologies</option><option>Building Management Systems</option><option>Sensors and Controls</option><option>HVAC Systems</option><option>Electrical Hot Water Systems</option><option>Heatpumps</option><option>Induction Heating</option><option>Showerheads and Temperature Control</option><option>Process optimisation</option><option>Compressed Air Systems / Hydraulics</option><option>Process Heating</option><option>Refrigeration and Cooling</option><option>Waste Heat Recovery (Incl Micro Turbines)</option><option>Electric Boilers and Steam Systems</option><option>Drying Technologies</option><option>Material Handling systems -Pumps and Conveyors</option><option>Pumps</option><option>Ventilation Fans</option><option>Energy Efficient Motor Systems</option><option>Advanced Motor Technologies (VSDs etc.)</option><option>Thermal Insulation (cooling & Heating)</option><option>Agriculture Irrigation Systems</option><option>Ind & Com Solar Hot Water Systems</option></select>") 
});

这是我用来尝试获取值的代码:

$(".selectoror").live('change', function()
{
    var parental = $(this).closest(".payTableRow");
    var childrens = $(parental).find(".container");

    alert($(this+":selected").val());

    if($(this+":selected").val() != "Ind & Com Solar Hot Water Systems")
    {
        $(childrens[1]).html("42");
    }
    else
    {
        $(childrens[1]).html("70");
    }
});

但无论哪个下拉列表的选择被更改,我更改它只返回第一个值。

这是html:

       <form id="form">
            <div style="background:url(images/top_menu2.jpg) no-repeat; width: 966px; height: 49px;"></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
            <div class="payTableRow"><div class="payCell1 container"></div><div class="payCell2 container"><div data-pay-edit="yes">0</div></div><div class="payCell3 container"><div data-pay-edit="no">0</div></div><div class="payCell4 container"><div data-pay-edit="yes">0</div></div><div class="payCell5 container"><div data-pay-edit="yes">0</div></div><div class="payCell6 container"><div data-pay-edit="yes">0</div></div><div class="payCell7 container"><div data-pay-edit="yes">0</div></div><div class="payCell8 container"><div data-pay-edit="yes">0</div></div><div class="payCell9 container"><div data-pay-edit="yes">0</div></div><div class="payCell10 container"><div data-pay-edit="yes">0</div></div><div class="payCell11 container"><div data-pay-edit="yes">0</div></div><div class="payCell12 container"><div data-pay-edit="yes">0</div></div></div>
    </form>

任何帮助非常感谢。 提前谢谢!

1 个答案:

答案 0 :(得分:2)

你不需要:selected(做$(this+":selected")是一个非常糟糕的主意,一个是javascript / dom对象,另一个是字符串,它们的连接不是你想要的),所以试试

$(".selectoror").live('change', function() {
    ...
    alert($(this).val());
    ...
});

这表明您不需要:selected选择器:http://jsfiddle.net/NJyH2/

这是您的代码:http://jsfiddle.net/NJyH2/1/