[jQuery Mobile]jQuery根据select选中的值联动

针对那个小的jQuery Mobile的项目,刚完成了路程明细的修改,今天又开会进行了讨论,新的需求又来了。这样的企业就是这样,需求永久都没个定论。哎,谁让咱吃的这口饭呢。改吧,其实要改做的就是jQuery根据select选中的值,其他内容做相应的变动

需求说明

每个路线里的类别不同,起点和终点两个字段相应显示和隐藏。

  1. 交通费    起点和终点都要显示出来。

  2. 招待费 或 住宿费    只显示终点字段,并且 终点 这两个字得变成 发生地。

  3. 邮寄费 或 标书费 或 其他 起点和终点 两个字段都不显示。

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操作元素的显隐,取值等。

分享到:更多 ()

抢沙发

评论前必须登录!