第一次选择长方形选项输入数据单击计算没有反应，选项换成圆形后输入并单击计算才转换并弹出数值。按了浏览器的后退键后才可以正常使用。
这是HTML的代码：
<!DOCTYPE html>
<form method="POST" action="my3.svlt">
<select id="selectid" name=t onchange="role()">
<option value="0">请选择</option>
<option value="1">长方形面积</option>
<option value="2">圆形面积</option>
<option value="3">长方形周长</option>
<option value="4">圆形周长</option>
</select>
<div id="length" style="display: none;">
<span class="x-red"></span>长 <input type="text" name=len required=""
autocomplete="off" class="layui-input" value="">
</div>
<div id="width" style="display: none;">
<span class="x-red"></span>宽 <input type="text" name=wid required=""
autocomplete="off" class="layui-input" value="">
</div>
<div id="ridus" style="display: none;">
<span class="x-red"></span>半径 <input type="text" name=rid required=""
autocomplete="off" class="layui-input" value="">
</div>
<script>
function role() {
var sel1 = document.getElementById('selectid');
var index = sel1.selectedIndex;
var value = sel1.options[index].value;
if (value == 1) {
document.getElementById("length").style.display = "block";
document.getElementById("width").style.display = "block";
document.getElementById("ridus").style.display = "none";
} else if (value == 2) {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "block";
} else if (value == 3) {
document.getElementById("length").style.display = "block";
document.getElementById("width").style.display = "block";
document.getElementById("ridus").style.display = "none";
} else if (value == 4) {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "block";
} else {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "none";
}
}
</script>
<button>计算</button>
</form>
这是servl中doPost的代码：
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=utf-8");
int value = Integer.parseInt(request.getParameter("t"));
System.out.println(+value);
if (value == 1) {
float l = 0;
try {
l = Float.parseFloat(request.getParameter("len"));
} catch (Exception e) {
l = 0;
}
if (l <= 0) {
response.getWriter().println("长方形的长度len不符合要求");
return;
}
float w = 0;
try {
w = Float.parseFloat(request.getParameter("wid"));
} catch (Exception e) {
w = 0;
}
if (w <= 0) {
response.getWriter().println("长方形的宽度wid不符合要求");
return;
}
float s = l * w;
String content = "长方形的面积为:" + s;
response.getWriter().println(content);
} else if (value == 3) {
float l = 0;
try {
l = Float.parseFloat(request.getParameter("len"));
} catch (Exception e) {
l = 0;
}
if (l <= 0) {
response.getWriter().println("长方形的长度len不符合要求");
return;
}
float w = 0;
try {
w = Float.parseFloat(request.getParameter("wid"));
} catch (Exception e) {
w = 0;
}
if (w <= 0) {
response.getWriter().println("长方形的宽度wid不符合要求");
return;
}
float d = 2*(l + w);
String content = "长方形的周长为:" + d;
response.getWriter().println(content);
} else if (value == 2) {
float r = 0;
try {
r = Float.parseFloat(request.getParameter("rid"));
} catch (Exception e) {
r = 0;
}
if (r <= 0) {
response.getWriter().println("圆形的半径rid不符合要求");
return;
}
float Pi = 3.14f;
float s = Pi * r * r;
String content = "圆形的面积为:" + s;
response.getWriter().println(content);
} else if (value == 4) {
float r = 0;
try {
r = Float.parseFloat(request.getParameter("rid"));
} catch (Exception e) {
r = 0;
}
if (r <= 0) {
response.getWriter().println("圆形的半径rid不符合要求");
return;
}
float Pi = 3.14f;
float d = 2 * Pi * r;
String content = "圆形的周长为:" + d;
response.getWriter().println(content);
}else {
String content = "请选择功能" ;
response.getWriter().println(content);
}
}
这样就可以了
<form id="fm" method="POST" action="my3.svlt">
<select id="selectid" name=t onchange="role()">
<option value="0">请选择</option>
<option value="1">长方形面积</option>
<option value="2">圆形面积</option>
<option value="3">长方形周长</option>
<option value="4">圆形周长</option>
</select>
<div id="length" style="display: none;">
<span class="x-red"></span>长 <input type="text" name=len required=""
autocomplete="off" class="layui-input" value="">
</div>
<div id="width" style="display: none;">
<span class="x-red"></span>宽 <input type="text" name=wid required=""
autocomplete="off" class="layui-input" value="">
</div>
<div id="ridus" style="display: none;">
<span class="x-red"></span>半径 <input type="text" name=rid required=""
autocomplete="off" class="layui-input" value="">
</div>
<script>
function role() {
var sel1 = document.getElementById('selectid');
var index = sel1.selectedIndex;
var value = sel1.options[index].value;
if (value == 1) {
document.getElementById("length").style.display = "block";
document.getElementById("width").style.display = "block";
document.getElementById("ridus").style.display = "none";
} else if (value == 2) {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "block";
} else if (value == 3) {
document.getElementById("length").style.display = "block";
document.getElementById("width").style.display = "block";
document.getElementById("ridus").style.display = "none";
} else if (value == 4) {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "block";
} else {
document.getElementById("length").style.display = "none";
document.getElementById("width").style.display = "none";
document.getElementById("ridus").style.display = "none";
}
}
function submitFm() {
var form = document.getElementById('fm');
form.submit();
}
</script>
<button onclick="submitFm()" type="submit">计算</button>
</form>