Question

我写了一个javascript函数。

function wellChecked(state) {
if (state)
{
wellDropDown.style.visibility = 'visible';
}
else
{
wellDropDown.style.visibility = 'hidden';
}
}

我在Well Modification <td>之后有一个复选框，如下所示，

<tr>
  <td>On Call</td>
  <td><html:checkbox property="onCall"/></td>
  <td>Well Modification</td>
  <td><input type="checkbox" onclick="wellChecked(this.checked)" /></td>
</tr>

单击该复选框时，我希望显示div id=wellDropDown下的下拉列表。默认情况下，如果未单击复选框，则不应显示下拉列表。

<tr>
  <td>Active</td>
  <td><html:checkbox property="active"/></td>
<div id="wellDropDown" style="visibility:hidden;">
  <td>     
    <html:select property="wellFormatId">
    <html:option value="">(Select)</html:option>
    <bean:define id="wellFormatColl"  name="wellFormats" scope="request"/>
    <logic:iterate id="wellFormats" name="wellFormatColl" indexId="index" type="com.astrazeneca.compis.data.WellFormatVO">
        <% Long wellId = wellFormats.getWellFormatId();%>
        <% String wellIdNo = wellId.toString(); %>
        <html:option value="<%=wellIdNo%>">
        <bean:write name="wellFormats" property="wellFormatName"/>
        </html:option>
    </logic:iterate>
    </html:select>
  </td>
 </div>
</tr>

当我尝试执行此代码时，无论选中或未选中复选框，我都会看到显示下拉列表。

我在这种情况下出错了？请提供您的建议或方法来实现我的要求。

Answer 1

您的HTML无效。您可能没有div这样的td。要么使td本身可见或不可见，要么将div放在td内，而不是将其放在td周围。

此外，除非wellDropDown是全局JS变量，否则代码应为

document.getElementById("wellDropDown").style.visibility = 'visible';

Answer 2

使用jquery你可以这样做：

    <tr>
      <td>On Call</td>
      <td><html:checkbox property="onCall"/></td>
      <td>Well Modification</td>
      <td><input type="checkbox" id="myCheckBox" /></td>
    </tr>
...

<script>
$('#myDropDown').click(
  function () {             
    $("#wellDropDown").toggle();    
  });
);
</script>

在JSP中使用<div>标记使内容隐藏或可见</div>

2 个答案: