**
下拉框选定后提交选定内容和链接参数的应用(动态获取下拉框内容作为链接参数跳转页面)
**
首先是下拉框的建立,这里应为追求代码的复用性,就没有把类型写死,而是通过后台的字典方法进行查询,这样代码的利用率更高。
<div class="control-group">
<label class="control-label">收费方式:</label>
<div class="controls">
<p><form:select path="feeCharge.type" class="input-medium">
< form:options items="${fns:getDictList('fee_receive_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
</form:select>
</p>
</div>
A标签的代码块,很简单就不多说了。
<a id="a1" class='btn btn-outline-success btn-warning' href="" >确认收费</a>
下面是核心部分的逻辑。
<script>
var type = 0;
$(".controls p").change(function(){ //下拉框改变时取得值
var options = $(".controls option:selected"); //获取选中的项,这里是获取单个下拉框内容。
type = (options.val());
console.log( "type:"+type);
});
//注意这个选框的function一定不能放在下面a标签的内部!!!!!!不然就获取不到type的变化值
$('#a1').click(function(){
var chargeIds =[]; //这里的ids是我需求里的另外一个可变长参数,用于获取多个id
$("input[name='asd']:checked").each(function(){
chargeIds.push($(this).attr("id")); //这里的获取方式为批量获取参数,用到遍历,用于批量操作。
});
console.log("ids:"+chargeIds);
$('#a1').attr('href','${ctx}/business/feeCharge/batchPayFeeChargeCash?ids='+chargeIds+'&type='+type+''); //这里的链接拼接还有很多种方式,我为了偷懒就写在一起了
});
<script/>