针对那个小的jQuery Mobile的项目,刚完成了路程明细的修改,今天又开会进行了讨论,新的需求又来了。这样的企业就是这样,需求永久都没个定论。哎,谁让咱吃的这口饭呢。改吧,其实要改做的就是jQuery根据select选中的值,其他内容做相应的变动。
需求说明
每个路线里的类别不同,起点和终点两个字段相应显示和隐藏。
-
交通费 起点和终点都要显示出来。
-
招待费 或 住宿费 只显示终点字段,并且 终点 这两个字得变成 发生地。
-
邮寄费 或 标书费 或 其他 起点和终点 两个字段都不显示。
实现代码
js代码:
function changeLocation() { $('#divFee select[name^="FeeType"]').each(function () { $(this).change(function () { var sval = $(this).val(), sname = $(this).attr('name'); var sidnum = sname.substr(-1); //console.log(sval); //console.log(sid); //console.log(sname.substr(-1)); if (sval == '交通费') { $('#txtStartPlace' + sidnum).val('').parent().show(); $('#txtEndPlace' + sidnum).val('').parent().show(); $('label[for="txtStartPlace' + sidnum + '"]').show(); $('label[for="txtEndPlace' + sidnum + '"]').text('终点:').show(); } else if (sval == '招待费' || sval == '住宿费') { $('#txtStartPlace' + sidnum).val('').parent().hide(); $('#txtEndPlace' + sidnum).val('').parent().show(); $('label[for="txtStartPlace' + sidnum + '"]').hide(); $('label[for="txtEndPlace' + sidnum + '"]').text('发生地:').show(); } else { $('#txtStartPlace' + sidnum).val('').parent().hide(); $('#txtEndPlace' + sidnum).val('').parent().hide(); $('label[for="txtStartPlace' + sidnum + '"]').hide(); $('label[for="txtEndPlace' + sidnum + '"]').hide(); } }); }); }
在页面加载完成后需要调用一下该函数。
然后,在点击 增加路线 链接时,需要将新增加的元素 也要 绑定 change()事件。所以还需要调用下.
changeLocation();
实现代码地址
http://jsfiddle.net/lubeiaa/24eo5co7/
总结
这里面的思路其实也很简单:判断select选中的值,然后选中相应的label和input元素,隐藏,显示。主要用到的知识点有jQuery选择器,jQuery操作元素的显隐,取值等。
评论前必须登录!
注册