获取下拉框中的值

1、下拉选如图所示,支持模糊查询,使用的是select2插件。

2、前台代码如下所示:

<td class="title-query">任务状态:</td>
 <td class="input-query" nowrap>
          <select id="taskStatus" name="taskStatus" class="code">
                     <option value="">全部</option>
                     <c:forEach items="${colnames }" var="col">
                         <option value="${col.codeCode }"
                               <c:if test='${uiMiMessageForm.taskStatus==col.codeCode }'>selected</c:if>>${col.codeCName }</option>
                     </c:forEach>
            </select>
 </td>

3、colnames:后台查询出的对象,封装的有任务状态的信息

4、获取选中下拉框的值

  4.1、第一种方式,代码如下:

     /* 任务状态  */
    var taskStatus = document.getElementsByName("taskStatus")[0].value;

  4.2、第二种方式,代码如下:

      a、定义一个js函数:

function getSelectValue(sel){
        var select = null;
        for(var i = 0; i < sel.length; i++){
            if (sel[i].selected == true) {
                select = sel[i].value;
            }
        } 
        return select;
    }

b、获取选中的任务状态:

var sel = document.getElementById("taskStatus");
var taskStatus = getSelectValue(sel);

以上就是两种获取下拉框的两种方式,解决问题的方法不止一种,适合自己的才是最好的。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对您的问题,我可以给您提供一些思路和代码示例。 首先,实现一个 JSP 下拉选框,可以使用 HTML 的 <select> 标签和 <option> 标签,例如: ```html <form> <label for="product-select">选择商品:</label> <select name="product" id="product-select"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> <input type="button" value="查询价格" onclick="queryPrice()"> </form> ``` 这个下拉选框,每个 <option> 标签都代表一个商品,其 value 属性表示该商品的代码。例如,value="apple" 表示苹果。 接下来,实现查询商品价格的功能,可以使用 JavaScript 来监听查询按钮的点击事件,根据用户选择的商品代码,动态地加载对应的价格。例如: ```javascript <script> function queryPrice() { var selectEl = document.querySelector('select[name="product"]'); var productCode = selectEl.value; // 获取用户选择的商品代码 // TODO: 根据商品代码加载对应的价格 var price = getPriceByCode(productCode); alert('商品 ' + productCode + ' 的价格为 ' + price + ' 元'); } function getPriceByCode(code) { // TODO: 根据商品代码向后端获取商品价格 var prices = { 'apple': 5, 'banana': 3, 'orange': 4 }; return prices[code]; } </script> ``` 在 TODO 的部分,您可以根据商品代码发起 Ajax 请求,向后端获取对应的商品价格,然后将价格展示到页面上。这里为了演示方便,使用了一个 getPriceByCode 函数来模拟获取商品价格的过程。 以上就是一个简单的 JSP 下拉选框和查询商品价格的实现思路。如果您需要更详细的代码实现示例,可以告诉我您的具体需求,我会尽力帮助您。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值