Question

我有一张纪律处分表。有5种类型的纪律处分，警告和严重程度。最高严重性级别是暂停，它有几个额外的表字段。这些字段默认通过CSS隐藏。当有人选择下拉选项＆＃34; Suspension＆＃34;这些字段应该可见。

这是我最近解决这个问题的尝试，但它也没有起作用：

<script type="text/javascript">
            $(document).ready(function () {
                var num = "suspn";
                $("#i_action option").each(function () {
                    if ($(this).val() === num) { // EDITED THIS LINE
                        sus();
                    }
                    else { // EDITED THIS LINE
                        unsus();
                    }
                });
            });
            function sus() {
                document.getElementById("susp").className += "susp_show";
            }
            function unsus() {
                document.getElementById("susp").className -= "susp_show";
            }
</script>

和html：

<select id="i_action" name="i_action">
    <option value="verbl">Verbal Warning</option>
    <option value="1warn">1st Written Warning</option>
    <option value="2warn">2nd Written Warning</option>
    <option value="3warn">3rd Written Warning</option>
    <option value="suspn">Suspension</option>
</select>
<table class="offence" cellpadding="0" cellspacing="0">
    <tr><td>Employee Name:</td> <td><input disabled="true" style="color: #222" type="text" value="<?= $ename00 ?>" /></td></tr>
    <tr><td>Today's Date:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?> " /></td></tr>
    <tr><td>Date of Infraction:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?>" /></td></tr>
    <tr id="susp"><td>Length of suspension:</td> <td> <input type="text" value="" /></td></tr>
    <tr id="susp"><td>Suspension Start Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr id="susp"><td>Suspension End Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr><td>Reason For Action:</td> <td><textarea></textarea></td></tr>
    <tr><td>Employee Comments</td> <td><textarea></textarea></td></tr>
</table>

css：

#susp{display: none;}
.susp_show{display: table-row !important;}

Answer 1

为您的添加添加空格并删除className += " susp_show"。它目前正在上课Someclassnamesusp_show。 ps，ID在文档中应该是唯一的，只要注意到你有3 tr＆＃39; 3 id怀疑

＆＃13;

$(document).ready(function () {
                
                $("#i_action").change(function(){
                 if($(this).val()=="suspn"){ 
                          
                             $('.susp').css('display','block');
                           
                       }else{
                         $('.susp').css('display','none');
                         }
                    
                });
   
            });

＆＃13;

.susp{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="i_action" name="i_action">
    <option value="verbl">Verbal Warning</option>
    <option value="1warn">1st Written Warning</option>
    <option value="2warn">2nd Written Warning</option>
    <option value="3warn">3rd Written Warning</option>
    <option value="suspn">Suspension</option>
</select>
<table class="offence" cellpadding="0" cellspacing="0">
    <tr><td>Employee Name:</td> <td><input disabled="true" style="color: #222" type="text" value="<?= $ename00 ?>" /></td></tr>
    <tr><td>Today's Date:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?> " /></td></tr>
    <tr><td>Date of Infraction:</td> <td> <input type="text" value="<?= $today = date("m/d/y") ?>" /></td></tr>
    <tr class="susp"><td>Length of suspension:</td> <td> <input type="text" value="" /></td></tr>
    <tr class="susp"><td>Suspension Start Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr class="susp"><td>Suspension End Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
    <tr><td>Reason For Action:</td> <td><textarea></textarea></td></tr>
    <tr><td>Employee Comments</td> <td><textarea></textarea></td></tr>
</table>

＆＃13;

Answer 2

尝试在.change元素上使用<select>并使用类（而不是id）来定位需要显示/隐藏的元素。

示例：

// inside document.ready
$('#i_action').on('change', function (event) {
    var val = event.target.value; // or $(this).val()
    if (val === "suspn") {
        $('.susp').show();
    } else {
        $('.susp').hide();
    }
});

Answer 3

您有3个具有相同ID的元素，这在HTML中是不允许的。您可以将它们更改为类，因为类可以应用于多个HTML元素。

<tr class="susp"><td>Length of suspension:</td> <td> <input type="text" value="" /></td></tr>
<tr class="susp"><td>Suspension Start Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>
<tr class="susp"><td>Suspension End Date:</td> <td> <input type="text" value="" placeholder="MM/DD/YYYY" /></td></tr>

如果您只是想添加/删除类，那么请使用jQuery函数。

$(document).ready(function() {

  $("#i_action").change(function() {
    if ($(this).val() == "suspn") {
      $(".susp").addClass("susp_show"); //add class
    } else {
      $(".susp").removeClass("susp_show"); //remove class
    }
  });
});

此外，susp_show类必须具有正确的css逻辑。

.susp {
  display: none;
}

.susp_show {
  display: table-row;
}

根据选择框选项将CSS规则添加到div

3 个答案: