javascript问题，急求各位大神，在线等，真的很着急！ 新年好
具体说明如下，可能有些麻烦，希望能给代码写的详细些
步骤1.后台传一个省份的名称；
步骤2.下拉框如果选择这个省份；
步骤3.下面的市区下拉框可以选择对应的市区；
如果，步骤2选择的是别的省份，步骤3置灰不可选。
其实就是跟着步骤1的值作出相应选择，
省：<select id="pro">
<option value="">省份</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广西">广西</option>
</select>
市：<select id="city"><option value="">市区</option></select>
<script>
var selectedPro = '广西';///这个js变量值改为你从服务器取到的
//市区数组
var arrCity = [];
arrCity['北京'] = [{ t: '北京市' }];
arrCity['上海'] = [{ t: '上海市' }];
arrCity['广西'] = [{ t: '南宁市' }, { t: '桂林市' }, { t: '柳州市' }];
document.getElementById('pro').onchange = function () {
if (this.value == selectedPro) addOptions(document.getElementById('city'), arrCity[this.value]);
else document.getElementById('city').selectedIndex = 0;
document.getElementById('city').disabled = this.value != selectedPro;///和后台传来的值不一样禁用
}
function addOptions(s, arr) {
if (!arr || arr.length == 0) arr = [{ t: '市区' }];
if (!s) { alert('select对象不存在！'); return false }
s.options.length = 1;
for (var i = 0; i < arr.length; i++) s.options.add(new Option(arr[i].t, arr[i].t));
}
</script>
这个实现起来很简单的，只要绑定两个组件就OK，这种效果叫级联操作：
一个示例：
<!DOCTYPE html>
<br> .cascade { float: left; width: 120px; height: 30px; }<br> .cascade select { width: 100%; height: 100%; }<br>
<div class="cascade">
<select id="province" onchange="change();">
<option>--请选择省份--</option>
</select>
</div>
<div class="cascade">
<select id="city">
<option>--请选择市--</option>
</select>
</div>
<script type="text/javascript">
//首先建立一个你需要省，和它对应的市的数组，如下：
var cityList = new Array();
cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
//然后写一个方法把这一大长串的数组给他调到你需要的地方去
function change() {
var pVal = document.getElementById("province").value; //获取省份列表中的值
var c = document.getElementById("city"); //获取城市列表
c.options.length = 0; //清楚当前城市列表中的值
for (var i in cityList) { //循环遍历cityList的属性
if (i == pVal) { //判断当i等于省份列表中的值时;
for (var j in cityList[i]) { //循环遍历cityList[i]的属性
c.add(new Option(cityList[i][j], cityList[i][j]), null)
//城市列表的末尾增加一个<option>选项，text：cityList[i][j]，value：cityList[i][j]
}
break;
}
}
}
function allCity() {
var p = document.getElementById("province"); //获取省份列表
for (var i in cityList) { //循环遍历cityList的属性
p.add(new Option(i, i), null);
//省份列表的末尾增加一个<option>选项，text：i，value：i
}
}
window.onload = allCity;
</script>
通过你表述的 我在一本教材上的看过类似的 《javaweb从入门到精通》的308页 你可以从网上下个pdf的看看 不知道可以可以帮到你
用值改变事件就可以解决了
1.用户选择省份下拉框的时候，判断值是否等于后台值，然后操作就可以了
2.主要就是做后台会传递的所有省份的数组，和对应的城市的二维数组；然后根据用户操作判断就可以了
//html
<select id="pro">
<option>省份</option>
<option>黑龙江</option>
<option>北京</option>
</select>
<select id="city" disabled>
<option>市区</option>
</select>
<input type="hidden" class="province" value="黑龙江">
//js
$(document).ready(function (){
$("#pro").change(function(){
var province = $(".province").val();//后台值
var proNow = $("#pro").val();//用户选择的省份
var allProvince =["黑龙江","北京","..."];//后台可能传过来的省份
var index=-1;
var allCity = [[111,111,111],[222,222,222],[333,333,333]];//和省份数组的位置对应的城市
if (proNow == province) {//判断用户选择省份是否等于后台省份
for (var i=0; i<allProvince.length; i++) {//取得省份所在城市数组的下标
var pro = allProvince[i];
if(pro == province) {
index = i;
break;
}
}
}
//添加城市与设置不可点击
if (index!=-1) {
console.log(222);
$("#city").html("");
for(var i=0;i<allCity[index].length;i++){
$("#city").append("<option>"+allCity[index][i]+"</option>");
}
$("#city").attr("disabled",false);
} else {
console.log(111);
$("#city").html("");
$("#city").append("<option>市区</option>");
$("#city").attr("disabled","disabled");
}
});
});
我之前也遇到过相同的问题，我通过写的一个js代码解决了，大致内容如下：
<html>
<body>
<script src="jquery-3.1.1.js" type="text/javascript"></script>
<form action="/example/html/form_action.asp" method="get">
院系：<select id="yuanxi" onclick="a()">
<option value="0" > </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
班级：<select name="level" id="banji">
<option class="1" value="C"> </option>
<option class="1" value="C">C</option>
<option class="2" value="C++">C++</option>
<option class="2" value="Python">Python</option>
</select>
</form>
<script type="text/javascript">
function a () {
var value = document.getElementById('yuanxi').options[document.getElementById('yuanxi').selectedIndex].text;//得到文本框中的内容
var length = $("#banji > option").length;//得到班级下面的所有option个数
for(var i =1;i<length;i++) {
var currentElem = $("#banji > option:eq("+i+")");
if(currentElem.attr("class") != value) {//将所有与这个值不相等的信息隐藏
currentElem.css("display","none");
} else {
currentElem.css("display","block");//相等的信息显示出来
}
}
}
</script>
</body>
</html>
意思就是有两组数据，院系和班级（这个我是通过JSP，然后从后台传进来的数据），数据库中存放的关系就是一个院系下面有许多个班级。
所以后台传过来的时候，将院系的值作为在第一个标签下的的value值，然后对应的value值，作为第二个（也就是班级）下面的的class。
然后使用javascript代码（用到了jquery），根据所选择的第一个院系的value，然后遍历下面的班级中与之对应的class的值，如果不相同的就设置为不可见。
我的思路就是这样的。
下拉框的级联操作
dao层：
public class ProDaoImpl implements IProDao {
@Override
public List<Province> queryPro() {
Session session=HibernateUtil.getsSessionFactory().openSession();
List<Province> prolist=session.createQuery("from Province").list();
session.close();
return prolist;
}
@Override
public List<City> queryCityByPId(Integer pid) {
Session session=HibernateUtil.getsSessionFactory().openSession();
Query query=session.createQuery("from City where province.pid=?");
query.setInteger(0, pid);
List<City> citylist=query.list();
session.close();
return citylist;
}
}
biz层：
public class ProBizImpl implements IProBiz {
ProDaoImpl dao=new ProDaoImpl();
@Override
public List<Province> queryPro() {
// TODO Auto-generated method stub
return dao.queryPro();
}
@Override
public List<City> queryCityByPId(Integer pid) {
// TODO Auto-generated method stub
return dao.queryCityByPId(pid);
}
}
action层：
public class ProvinceAction extends ActionSupport {
private List prolist;
private List citylist;
/**
* citylist存的是从数据库中查询出来的结果，由于json中不能保存对象，
* 所以将citylist中的值存到<Map<String,Object>键值对中，
* 将map中的值用list嵌套起来，方便前台遍历
*
*
* */
private List<Map<String,Object>> cityMapList;
ProBizImpl biz=new ProBizImpl();
public String queryProvince(){
prolist=biz.queryPro();
return SUCCESS;
}
public String queryCityByPId(){
cityMapList=new ArrayList<Map<String,Object>>();
String pid=ServletActionContext.getRequest().getParameter("pid");//从页面取到省份id传入后台
if(pid!=null){
citylist=biz.queryCityByPId(Integer.parseInt(pid));
for(City city:citylist){
Map<String,Object> map=new HashMap<String,Object>();
map.put("cid", city.getCid());
map.put("cname", city.getCname());
cityMapList.add(map);
}
}
return SUCCESS;
}
struts:
<struts>
<!-- 返回json格式继承json-default -->
/index.jsp
<!-- 指定哪一个action属性进行转换 -->
<!-- param是action的参数 root是json最高级 -->
cityMapList
jsp页面：
<br> function queryCityByPId(){<br> var pid=$("#prosel").val();<br> $.ajax({<br> url:"<%=path%>/queryCityByPIdAction", //访问路径<br><br> dataType:"json", //数据传输类型<br><br> type:"post", //请求方式<br><br> data:{"pid":pid}, //请求的json data从页面上获取json值<br> success:function(data){ //回调函数 data接收的是action中的返回值<br> var jsonStrHtml;<br> for(var i=0;i<data.length;i++){<br> jsonStrHtml+="<option value='+dada[i].cid+'>"+data[i].cname+"</option>";<br><br> }<br> //拼接好的字符串存入下拉列表<br> $("#citysel").html(jsonStrHtml);</p> <p>}</p> <p>})</p> <p>}<br>
--省份--
${pro.pname}
--城市--