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

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

需求说明

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

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

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

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

实现代码

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