问题描述

在jsp中如何实现如下的页面默认只显示一个下拉选的内容！

医疗卫生机构、如在“医疗卫生机构”选择“医院”则填如下信息：医院属性、医院类别、单位性质；如在“医疗卫生机构”选择“基层医疗卫生机构”则填如下信息：基层医疗卫生机构；是否在协同单位培训、协同单位（与单位公章对应的官方全称）、协同单位性质

 <td  colspan="3" align="left">
             <select id="medicalHealthInstitutions" name="medicalHealthInstitutions"        onchange="selectMedicalHealthInstitutions();" class="input_len1">
                                <option value="1" >医院</option>
                                <option value="2">基层医疗卫生机构</option>
                                </select>
                       </td>
                    </tr>
                    <tr id="hosInputs">
                        <td  align="right">
                            医院属性<c:if test="${fieldMap.hospitalProp eq 1}"><font color="#FF0000">*</font></c:if>
                        </td>
                        <td align="left">
                            <input type="text" id="hospitalProp" name="hospitalProp" maxlength="10" value="${extend.hospitalProp}" class="input_len1" elname="医院属性" pattern="string"  max_len="10" />
                        </td>
                        <td  align="right">
                             医院类别<c:if test="${fieldMap.hospitalType eq 1}"><font color="#FF0000">*</font></c:if>
                        </td>
                        <td align="left">
                            <input type="text" id="hospitalType" name="hospitalType" maxlength="10" class="input_len1" value="${extend.hospitalType}" elname="医院类别" pattern="string" max_len="10"  />
                        </td>
                        <td  align="right">
                            单位性质<c:if test="${fieldMap.unitProp eq 1}"><font color="#FF0000">*</font></c:if>
                        </td>
                        <td align="left">
                            <input type="text" id="unitProp" name="unitProp" maxlength="10"  value="${extend.unitProp}"class="input_len1" elname="单位性质" pattern="string" max_len="10" />
                        </td>
                    </tr>
                    <tr id="unitInputs">
                        <td  align="right">
                            基层医疗卫生机构<c:if test="${fieldMap.basicInstitutions eq 1}"><font color="#FF0000">*</font></c:if>
                        </td>
                        <td align="left" colspan="5">
                            <input type="text" id="basicInstitutions" name="basicInstitutions" maxlength="10" value="${extend.basicInstitutions}" class="input_len1" elname="基层医疗卫生机构" pattern="string"  max_len="10" />
                        </td>
                    </tr>

写一个function函数

解决方案

写个对应的div隐藏，然后根据下拉列表选中后显示出来

解决方案二：

对应的分组信息tr放入tbody容器里面，设置tbody的显示隐藏，select非默认项的tbody隐藏起来

 <table><tr><td colspan="3" align="left">
    <select id="medicalHealthInstitutions" name="medicalHealthInstitutions" onchange="document.getElementById('tbYY').style.display = this.value == '1' ? '' : 'none'; document.getElementById('tbJC').style.display = this.value == '1' ? 'none' : ''" class="input_len1">
        <option value="1">医院</option>
        <option value="2">基层医疗卫生机构</option>
    </select>
</td>
                    </tr>
    <tbody id="tbYY">
        <tr id="hosInputs">
            <td align="right">
                医院属性<c:if test="${fieldMap.hospitalProp eq 1}"><font color="#FF0000">*</font></c:if>
            </td>
            <td align="left">
                <input type="text" id="hospitalProp" name="hospitalProp" maxlength="10" value="${extend.hospitalProp}" class="input_len1" elname="医院属性" pattern="string" max_len="10" />
            </td>
            <td align="right">
                医院类别<c:if test="${fieldMap.hospitalType eq 1}"><font color="#FF0000">*</font></c:if>
            </td>
            <td align="left">
                <input type="text" id="hospitalType" name="hospitalType" maxlength="10" class="input_len1" value="${extend.hospitalType}" elname="医院类别" pattern="string" max_len="10" />
            </td>
            <td align="right">
                单位性质<c:if test="${fieldMap.unitProp eq 1}"><font color="#FF0000">*</font></c:if>
            </td>
            <td align="left">
                <input type="text" id="unitProp" name="unitProp" maxlength="10" value="${extend.unitProp}" class="input_len1" elname="单位性质" pattern="string" max_len="10" />
            </td>
        </tr>
    </tbody>
    <tbody id="tbJC" style="display:none">
        <tr id="unitInputs">
            <td align="right">
                基层医疗卫生机构<c:if test="${fieldMap.basicInstitutions eq 1}"><font color="#FF0000">*</font></c:if>
            </td>
            <td align="left" colspan="5">
                <input type="text" id="basicInstitutions" name="basicInstitutions" maxlength="10" value="${extend.basicInstitutions}" class="input_len1" elname="基层医疗卫生机构" pattern="string" max_len="10" />
            </td>
        </tr>
    </tbody></table>

解决方案三：

可以把table添加一个td在checkbox后边，当checkbox触发改变事件后，再显示这个td中的信息