下拉框选项改变后，其他框变为可手动填写和下拉框选择

需求：

在做一个需求时，客户要求既可以选也可以手动填写。

解决办法：

在这个功能模块中，用户下拉框选择时，js判断他是否要加载加载另一个下拉框让他选择后自动填充其他内容。比如，

选择内部人员，加载姓名下拉框，用户选择某个人后，将这个人的基本信息加载到其他框内，实现自动填充。

选择外来人员，框为输入框，让用户手动填写这些信息。

实现：

html代码

<div id="input_obj" style="display: none">
	<input type="text" id="stRymc" name="stRymc" value="${doucment.stRymc}"/>
</div>
<div id="select_obj" style="display: block">
	<c:choose>
	    <c:when test="${empty document }">
	    <input id="stPid" name="stPid" style="width: 220px" value="${document.stXm}"/>
		<input type="hidden" name="stXm" id="stXm" value="${doucument.stXm}"/>
	</c:when>
		<c:otherwise>
		    <p>${document.stXm}</p>
		</c:otherwise>
	</c:choose>
</div>


<div id="input_sex" style="display: none">
	<input id="showSex" name="showSex" required="true" value="${document.showSex}"                             
        style="width: 220px"/>
</div>
<div id="select_sex" style="display: block">
	<select id="selectSex" name="selectSex" >
		<option>男</option>
		<option>女</option>
	</select>
</div>

js代码

$('#stRyxz').combobox({
    onChange:function (newValue, oldValue) {
		if(newValue == "01"){
			$("#input_obj").css("display","none");
			$("#select_obj").css("display","");
			$("#input_sex").css("display","");
			$("#select_sex").css("display","none");
			xxxx();

		}else{
			$("#input_obj").css("display","");
			$("#select_obj").css("display","none");
			$("#input_sex").css("display","none");
			$("#select_sex").css("display","");
		}
	}
})

这个是通过控制css来实现内容的隐藏与显示。

来源：CSDN

作者：qq_33957196

链接：https://blog.csdn.net/qq_33957196/article/details/104053145

标签

下拉框