jquery获取下拉框的值并传递给后端处理

最新推荐文章于 2022-08-15 18:45:49 发布

weixin_33830216

最新推荐文章于 2022-08-15 18:45:49 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

文章标签：后端 javascript 前端 ViewUI

原文链接：https://my.oschina.net/zhangyangyang/blog/740060

本文介绍了一种从前端下拉框获取选中值并将其传递到后端的方法。通过在HTML表单中使用隐藏域存储下拉框的值，并借助JavaScript在提交表单前更新该隐藏域，实现了数据的有效传递。

2019独角兽企业重金招聘Python工程师标准>>>

由于前端页面用到了下拉框，此时需要获得下拉框里面具体的值，然后把值传递给后端处理。

处理思路如下：

（1）、首先在form表单里面写一个input的隐藏框，也就是属性为hidden。

（2）、把取得的下拉框里面的值，赋值给隐藏框。

（3）、用form表单把数据提交，这样后端就可以获得下拉框的值了。

一、html代码如下

<form action="" method=get>    
<div>
        <select name="" id="testselect">
            {% for i  in select_box %} 
	        <option value="" id="idselect" name="adsense">{{ i.zone_name }}</option>
            {% endfor %}
        </select>
        <input type="hidden" value="" name="adsense" id="adsense"/>
        <input type="search"  value="" id="adsense_ID" name="adsense_ID" placeholder="输入广告位ID"/>
        <input id="query_date"  name="query_date" type="date" value="2016-08-01"/>
        <button type="submit"  id="submit_data">查询</button>
</div>
</form>

二、js代码如下

        $("#submit_data").click(function(){
          //备注：$("#testselect option:selected").text()是为了获取下拉框的值
            $("#adsense").val($("#testselect option:selected").text());
        })

转载于:https://my.oschina.net/zhangyangyang/blog/740060