加载时运行脚本

Question

SO上的某人帮助我为选择框编写了此脚本，该框将基于下拉列表中的选择显示隐藏行

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

function takeAway(){
    $("#pickedup,#altad2,#altad1").css("display", "none");
}

我需要一些可以在加载时正常运行的东西，因此如果已经选择了东西，则显示行

这是受脚本影响的选择

<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>

我尝试了以下操作，但没有成功。

function showNext(opt)  {
        takeAway()

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

}
function takeAway(){
    $("#pickedup,#altad2,#altad1").css("display", "none");
 }
$(function(){
   $('#eReg|Emergclose_Action').trigger('onchange');
});

Answer 1

尝试删除onChange="showNext(value);" 从您的选择元素并更改ID。 有烟斗| 选择器中的代码不是一个好习惯，并且需要一个回合工作 ...如果没有它，会更容易。 用下划线_代替。

因此，您选择的html是：

<select name="eReg|Emergclose_Action" id="eReg_Emergclose_Action">

然后以这种方式执行javascript：

$(function(){

   //anything in here will run after the page loads

   //assign showNext to the change event
   $('#eReg_Emergclose_Action').change(function(){
      showNext($(this).val());
   }).change();//manually trigger the change event after its attached

});

Answer 2

如果以前有人选择是，则必须在页面加载时运行的脚本可以像下面使用Jquery进行优化

$（'＃eReg | Emergclose_Action'）。trigger（'onchange'）;