前段时间写的combobox,当时以为select option内容只能是写死的,没想到自己的姿势水平还是需要提高啊。。
combobox实在是太难看了,自己还不会调样式,试试select option吧。
$.ajax({
url:"order/findAllZw",
data:{},
dataType:"json",
type:"post",
success:function(result){
//console.log(result);
var zhangwu=document.getElementById('zhangwu');//根据id查询对象
data=eval('result');
for(var i=0;i<data.length;i++){
zhangwu.options.add(new Option(data[i].username,data[i].id)); //obj.options.add(new Option("text","value"));
}
},
error:function(result){
alert("加载账务失败");
}
});
@RequestMapping("findAllZw")
@ResponseBody
public void findAllZw(HttpServletRequest req,HttpServletResponse res) throws Exception{
JSONArray jsonArray=new JSONArray() ;
List<Map<String, String>> lists=new ArrayList<Map<String, String>>();
lists=orderService.findAllZw();
//System.out.println(lists);
jsonArray =JSONArray.fromObject(lists);
res.setContentType("text/html;charset=utf-8");
PrintWriter pw = res.getWriter();
pw.write(jsonArray.toString());
pw.flush();
// return new JsonResult(0);
}
获取选中的value:
$("#gfmc").val();
获取选中的text:
$("#SelectId").find("option:selected").text();
当select option里的内容发生变化时,导致其他内容也发生变化:
<div class="tianjia22">
<div class="tianjia18">单位名称:</div>
<div class="tianjia19">
<select type="text" name="gfmc" id="gfmc" οnchange="demo(this.options[this.options.selectedIndex].value);" class="tianjia20" placeholder="xxx" readonly="true"/>
</select></div>
</div><!--tianjia22 end-->
添加了一个onchange事件:
function demo(a){
// var d=document.getElementById("gfmc");
// console.log($("#gfmc").val());
// console.log(d.val());
console.log(a);
$("#gfmc option[value='"+a+"']").attr("selected", true);
for(var i=0;i<data.length;i++){
if(a==data[i].id){
$("#gfsh").val(data[i].khshuihao);
$("#gfdzdh").val(data[i].khdzdh);
$("#gfyhzh").val(data[i].khyhzh);
}
}
}
清空select option中全部选项:
id选择器:
$("#"+roleId+"").empty();
原生:
var role_id=document.getElementById(roleId);//根据id查询对象
role_id.options.length=0;