combobox实现下拉框及其值的获取

参考： http://blog.csdn.net/jacxuan/article/details/69421634

例子：

  <div id="productdiv" style="margin: auto;height:500px;width:400px;">
    <form action="product/getNumberAndUpdate" method="post" id="addProductForm" onsubmit="return check()" >
   <table>
   <thead><h1 style="margin:80px">商品出库</h1></thead>
    <tr>
   <td>出库商品：</td>
   <td>
   <input  name="product.id" class="product" id="productid" />
</td>
</tr>  
   <tr>
   <td>数量：</td>
   <td><input type="text" name="quantity" id="quantity" ></td>
   </tr>
   <tr> 
   <td>经手人：</td>
   <td><input type="text" name="Handler" id="Handler"></td>
   </tr>
    <tr>
    <td><input type="submit" value="提交"></input></td>
<td><input type="reset" value="重置"/></td>
     </tr>
   </table>
      </form>
    </div>

获取值以及使用js去判断：

 <%
     String username="0000";
//使用setAttribute设置一个属性，这个属性中存储了当前日期值

String username1=(String)request.getAttribute("sysParam"); 
     if(username1!=null&&username1!=""){
    username=username1;
     }
  %>
 <script type="text/javascript">
var strs="<%=username%>";
if(strs=="success"){
alert("操作成功！");
}
else if(strs=="0000"){
//alert("0000");
}
else if(strs!=""&&strs!=null){
alert(strs);
}
else{
alert("操作失败");
}
$('.product').combobox({
valueField : 'id',
textField : 'productname',
url : '<%=basePath%>product/getProduct',
});
function check(){
var productid = $('#productid').combobox('getValue');
// var productid=document.getElementById("productid").value;
 if(productid==""||productid==null){

 alert("请选择出库商品!");
 return false;
 }
else{
 var quantity=document.getElementById("quantity").value;
 if(quantity==""){
   alert("请填写出库数量!");
   return false;
 }
 else{  
 var Handler=document.getElementById("Handler").value;
 if(Handler==""){
 alert("请填写经手人!");
 return false;
 }
 }
 }  
 
}
</script>

combobox 是 easyui 封装的方法 , 通过他我们可以很简便的实现下拉框功能 . 下面我们用代码演示一下:

$("#getUserid").combobox({          //后台返回的 json 数据方法地址          url:'${pageContext.request.contextPath}/user/queryalluser',valueField:'userid',//相当于option的value值textField:'username',//相当于<option></option>之间的显示值 value:1000    //默认显示值});
1
2
3
4
5
6
1
2
3
4
5
6

JSP 页面

<input id="getUserid" style="line-height: 20px; border: 1px solid #ccc"> 
1
1

这个 input 框会被 combobox 改变为 select 下拉框

要注意 , 因为easyui 封装了 jQuery , 所以这个方法要放在 $(function(){}) 中 
读取 combobox 中选中的属性

var userid = $('#getUserid').combobox('getValue');
1
1

这样直接获取的就是选中的下拉框属性 , 不用做其他操作