Question

我有这个JQuery来显示/隐藏在IE9中不起作用的行，它对时间非常敏感，我完全不知道如何修复它。我尝试为IE8添加元标记，这使得它可以工作，但完全搞砸了格式化。我不确定它在IE8中的原生功能。它在Firefox和Chrome中运行。

function showNext(opt)  {       
      takeAway();     

      var optMap={
             "Picked Up":"#pickedup",
             "Bus to alternate":"#altad2,#altad1",
             "Walk to alternate":"#altad2,#altad1",
              };
           $(optMap[opt]).css("display","") ;       

}

此处调用该函数

<tr class="~[evenoddrow]"> 
        <td class="bold">In the event of early dismissal I would like my child to:</td><td id="Emergclose_Action">~([01]Emergclose_Action)</td><td class="gwCen"></td>
        <td><select name="eReg|Emergclose_Action" id="eReg|Emergclose_Action" onChange="showNext(value);">
                <option></option><option value="Walk home as normal">Walk home as normal</option><option value="Ride the bus as normal">Ride the bus as normal</option>
<option value="Picked Up">Be picked up immediately after dismissal</option><option value="Bus to alternate">Ride the bus to an alternate address</option><option value="Walk to alternate">Walk to an alternate address</option>
            </select>           
        </td>
    </tr>

显示的行位于

之下

<tr class="~[evenoddrow]" id="pickedup" style="display:none;"> 
<td class="bold">Name of the person that will be picking up your child:</td><td id="Emergclose_Who_Pickup">~([01]Emergclose_Who_Pickup)</td><td class="gwCen"></td>
        <td><input type="text" name="eReg|Emergclose_Who_Pickup" id="eReg|Emergclose_Who_Pickup" value="" size="30" /><span class="gwExample">last,&nbsp; first</span></td>
    </tr>
<tr class="~[evenoddrow]"  id="altad1" style="display:none;"> 
        <td class="bold"><span style="padding: 0 25px">I would like my child to go to the home of:</td></span><td id="Emergclose_Alt_Name">~([01]Emergclose_Alt_Name)</td><td class="gwCen"></td>
        <td><input type="text" name="eReg|Emergclose_Alt_Name" id="eReg|Emergclose_Alt_Name" value="" size="30" /><span class="gwExample">last,&nbsp; first</span></td>
    </tr>   
<tr class="~[evenoddrow]" id="altad2" style="display:none;"> 
        <td class="bold"><span style="padding: 0 25px">Address of Alternate Location:</td></span><td id="Emergclose_Alt_Address">~([01]Emergclose_Alt_Address)</td><td class="gwCen"></td>
        <td><input type="text" name="eReg|Emergclose_Alt_Address" id="eReg|Emergclose_Alt_Address" value="" size="30" /><span class="gwExample">Street Address, City, State, Zip</span></td>
    </tr>

Answer 1

我没有看到'切换'，所以你试过设置显示值吗？

Answer 2

我使用了这个标记：注意从标记和标记中的代码中删除了样式：

<table>
    <tr class="~[evenoddrow]">
        <td class="bold">In the event of early dismissal I would like my child to:</td>
        <td id="Emergclose_Action">~([01]Emergclose_Action)</td>
        <td class="gwCen"></td>
        <td>
            <select name="eReg|Emergclose_Action" id="eReg|Emergclose_Action" class="myselecitem">
                <option></option>
                <option value="Walk home as normal">Walk home as normal</option>
                <option value="Ride the bus as normal">Ride the bus as normal</option>
                <option value="Picked Up">Be picked up immediately after dismissal</option>
                <option value="Bus to alternate">Ride the bus to an alternate address</option>
                <option value="Walk to alternate">Walk to an alternate address</option>
            </select>
        </td>
    </tr>
    <tr class="~[evenoddrow] hiddenstuff choice" id="pickedup">
        <td class="bold">Name of the person that will be picking up your child:</td>
        <td id="Emergclose_Who_Pickup">~([01]Emergclose_Who_Pickup)</td>
        <td class="gwCen"></td>
        <td>
            <input type="text" name="eReg|Emergclose_Who_Pickup" id="eReg|Emergclose_Who_Pickup" value="" size="30" /><span class="gwExample">last,&nbsp; first</span>

        </td>
    </tr>
    <tr class="~[evenoddrow] hiddenstuff choice" id="altad1">
        <td class="bold"><span style="padding: 0 25px">I would like my child to go to the home of:</td></span>

            <td id="Emergclose_Alt_Name">~([01]Emergclose_Alt_Name)</td>
            <td class="gwCen"></td>
            <td>
                <input type="text" name="eReg|Emergclose_Alt_Name" id="eReg|Emergclose_Alt_Name" value="" size="30" /><span class="gwExample">last,&nbsp; first</span>

            </td>
    </tr>
    <tr class="~[evenoddrow] hiddenstuff choice" id="altad2">
        <td class="bold"><span style="padding: 0 25px">Address of Alternate Location:</td></span>

            <td id="Emergclose_Alt_Address">~([01]Emergclose_Alt_Address)</td>
            <td class="gwCen"></td>
            <td>
                <input type="text" name="eReg|Emergclose_Alt_Address" id="eReg|Emergclose_Alt_Address" value="" size="30" /><span class="gwExample">Street Address, City, State, Zip</span>

            </td>
    </tr>
</table>

这个CSS：

.clicked {
    background-color:lime;
}
.hiddenstuff {
    display:none;
}

此代码：

function showNext(opt) {
    //    takeAway();
    var optMap = {
        "Picked Up": "#pickedup",
            "Bus to alternate": "#altad2,#altad1",
            "Walk to alternate": "#altad2,#altad1"
    };
    $('#Emergclose_Action').text(optMap[opt]);
    $('.choice').removeClass('clicked').addClass('hiddenstuff');
    $(optMap[opt]).addClass('clicked').removeClass('hiddenstuff');
}
$('.myselecitem').change(function () {
    showNext($(this).val());
});

编辑：使用示例：http://jsbin.com/adexol/2/

Jquery代码在IE 9中不起作用，但在FF和Chrome中有效

2 个答案: