纯前端jQuery下拉框互斥&&距离计算

这两天改造了一个课件，本来是要拖拽车间放到ABC三个位置的，奈何本人太菜而且实现太麻烦就改成了下拉框，于是涉及到ABC互斥一个选项只能出现一次。

下拉框互斥可无限扩展，多组互斥配置一下name就行

为了不浪费大家的时间就先上实现代码，HTML：

<select name="" id="车床">
    <option value="">请选择</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select name="" id="磨床">
    <option value="">请选择</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

<select name="" id="铣床">
    <option value="">请选择</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>
<table id="table2">
    <thead>
        <tr>
            <td class="line"></td>
            <td>毛坯</td>
            <td>车床</td>
            <td>铣床</td>
            <td>磨床</td>
            <td>钻床</td>
            <td>装配</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>毛坯</td>
            <td class="line"></td>
            <td v='车床'>-</td>
            <td v='铣床'>-</td>
            <td v='磨床'>-</td>
            <td>1</td>
            <td>3</td>
        </tr>
        <!--剩下几个tr不再浪费空间-->
    </tbody>
</table>

JS：

<script>
    //已确定的车间位置 可以自由扩展
    var site = {
        毛坯: 0,
        车床: null,
        铣床: null,
        磨床: null,
        钻床: 3,
        装配: 5,
    };
    //ABC对应的点
    var option = {
        A: 1,
        B: 2,
        C: 4
    };
    //位置ABC为动态空间 用户自行配置车间
    //0   A   B
    //3   C   5

    //各点到各点的距离 这里应该也是可以用算法实现的，但我只有六个点的相互距离，所以直接穷举出来了。
    var dataArry = [
        [0, 1, 2, 1, 2, 3], //0-012345
        [1, 0, 1, 2, 2, 2], //1-012345
        [2, 1, 0, 3, 2, 1], //2-012345
        [1, 2, 3, 0, 1, 2], //3-012345
        [2, 1, 2, 1, 0, 1], //4-012345
        [3, 2, 1, 2, 1, 0]  //5-012345
    ];

    var prevValue = "";
    $('select').on('click', function() {
        prevValue = $(this).val(); //记录点击时下拉框的值
    }).on('change', function(el) {
        if ($(this).val() != '') { //切换到别的值
            $('select').not(this).children(`option[value='${prevValue}']`).removeAttr('disabled'); //释放prevValue在其他下拉框中的禁用状态
            $('select').not(this).children(`option[value='${$(this).val()}']`).attr('disabled', 'disabled'); //添加其他下拉框中当前选中值的禁用状态
            site[$(this).attr('id')] = option[$(this).val()]; //给选中项设置位置
        } else { //切换为空值
            $('select').children(`option[value='${prevValue}']`).removeAttr('disabled'); //释放prevValue在其他下拉框中的禁用状态
            site[$(this).attr('id')] = null;
        }
        //调用计算函数
        calculate()
    });
    //计算x到各个点的距离
    window.calculate = function() {
        $('#table2 tbody tr').each((index, dom) => {
            var i = site[$($(dom).children()[0]).text()];//拿到动态车间的点位 0-5
            if (i == null) {
                $(dom).children('td[v]').text('-')//当前行车间未确定位置 赋值为-
                return true;
            }
            $(dom).children('td[v]').each((index2, d) => {
                var j = site[$(d).attr('v')];
                if (j == null) {
                    $(d).text('-');//当前列车间未确定位置 赋值为-
                    return true;
                }
                $(d).text(dataArry[i][j]);//赋值 距离
            });
        });
    };
</script>

再放GIF截图方便理解，看文章的小伙伴自行判断是否可以代入自己所需的目标业务场景。核心思想为动态布置车间位置，然后再计算相互直接的距离。