JS中在线选座 已经实现点击座位将select对应怎么反过来点击select对应座位

发布于 2021-11-27 16:47:35 字数 3056 浏览 965 评论 3

当我选select时间如A2则对应available和click
/ 已经实现点击座位,将select对应怎么 反过来点击select对应座位 /

var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total'),
sc = $('#seat-map').seatCharts({
    map: [ //座位图 'ff__ff', 'ff__ff', '_____', 'ff__ff', 'ff__ff', 'ff__ff', 'ff__ff', 'ff__ff', 'ff__ff' ],
    seats: { //定义座位属性 f: {
            price   : 100,
            classes : 'first-class', 
            category: '一等座' },
        e: {
            price   : 40,
            classes : 'economy-class', 
            category: '二等座' }                    
    },
    naming : { //定义行列等信息 top : true,
        columns: ['A', 'B', 'C', 'D', 'F','G'],
        rows: ['1','2','','3','4','5','6','7','8','9'],
        getLabel : function (character, row, column) { return column + row;
        }
    },
    legend : { //定义图例 node : $('#legend'),
        items : [
            [ 'f', 'available', '一等座' ],
            [ 'e', 'available', '二等座'],
            [ 'f', 'unavailable', '已停用']
        ]                    
    },
    click: function () { if (this.status() == 'available') {//可选座 $('<li>' + this.data().category + '<br/>' + this.settings.label + '号位<br/></li>')
            .attr('id', 'cart-item-'+this.settings.id)
            .data('seatId', this.settings.id)
            .appendTo($cart); //更新票数 $counter.text(sc.find('selected').length+1); //计算总计金额 $total.text(recalculateTotal(sc)+this.data().price); return 'selected';
        } else if (this.status() == 'selected') {//已选中 $counter.text(sc.find('selected').length-1);
            $total.text(recalculateTotal(sc)-this.data().price); //删除已预订座位 $('#cart-item-'+this.settings.id).remove(); return 'available';
        } else if (this.status() == 'unavailable') {//已售出 //已售出 return 'unavailable';
        } else { return this.style();
        }
    },
    focus  : function() { if (this.status() == 'available') {
            $("#seat-info").show().html(this.settings.label+ '号位</li>'); var cd = getMousePoint(event);
            $("#seat-info").css({"left":(cd.x+10)+'px',"top":(cd.y-30)+"px"}); return 'focused';
        } else { return this.style();
        }
    }
});

/ 点击座位,将select对应 /

$(".available").on("click", function(){ var txt = $(this).text(); //获取当天点击 位置 所在的行 的索引,用以判断是一等座还是二等座 var index = $(this).parent(".seatCharts-row").index(); //6及6以上为二等座 if(index>=6){ var htmlTxt = ""+ txt +"";
        
        }else{ var htmlTxt = ""+ txt +"";
            }
            
    $("select").find("option:selected").val(txt);
    
    $("select").find("option:selected").text(htmlTxt);
点击select对应  座位怎么做啊 彻底乱了不会写了求帮忙

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

奢华的一滴泪 2021-11-30 21:18:56

大量表单的场景使用MVVM框架会方便很多.

够钟 2021-11-29 15:11:13

昨天就是按照你方法实现了哈谢谢

臻嫒无言 2021-11-28 11:17:46

onchange

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文