javascript - jquery .live ('change' )带回不可靠的结果

Question

我的页面上有几个下拉框，我想做的是在更改时获取已更改的下拉框的值。但发生的情况是我只获得了添加的第一个下拉框的值。

这是它们的添加方式:

$(".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>

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

Answer 1

你不需要 :selected (并且做 $(this+":selected") 是一个非常糟糕的主意，一个是 javascript/dom 对象，其他字符串，它们的连接不是您要寻找的)，所以尝试一下

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

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

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