JavaScript表单选择后生成带权图结构对象的实现方法

现有表单结构 #

表单包含两个关联下拉选择框：

• 起始点选择框：id为selectFromPOI，单选，用于选择路径起点POI
• 终点选择框：id为selectToPOI，支持多选，选中起点后自动加载所有和起点连通的节点，选项文本标注两点间距离
  对应表单代码：

<form>
   <select id="selectFromPOI" >
      <option>Choose a POI to Start From</option>
      <option value="T1">T1</option>
      <option value="T2">T2</option>
      <option value="T3">T3</option>
      <option value="T4">T4</option>
      <option value="CP C1">CP C1</option>
      <option value="CP C2">CP C2</option>
      <option value="CP C3">CP C3</option>
      <option value="CP C4">CP C4</option>
      <option value="CP C5">CP C5</option>
      <option value="CP C6">CP C6</option>
      <option value="CP C7">CP C7</option>
      <option value="CP C8">CP C8</option>
      <option value="CP C9">CP C9</option>
      <option value="CP C10">CP C10</option>
      <option value="CP C11">CP C11</option>
   </select>
   <select id="selectToPOI" multiple>
      <option value="T1">T1 , distance 0</option>
      <option value="T2">T2 , distance 42</option>
      <option value="T3">T3 , distance 88</option>
      <option value="T4">T4 , distance 129</option>
      <option value="CP C1">CP C1 , distance 60</option>
      <option value="CP C2">CP C2 , distance 263</option>
      <option value="CP C3">CP C3 , distance 273</option>
      <option value="CP C4">CP C4 , distance 289</option>
      <option value="CP C5">CP C5 , distance 293</option>
      <option value="CP C6">CP C6 , distance 385</option>
      <option value="CP C7">CP C7 , distance 366</option>
      <option value="CP C8">CP C8 , distance 326</option>
      <option value="CP C9">CP C9 , distance 294</option>
      <option value="CP C10">CP C10 , distance 303</option>
      <option value="CP C11">CP C11 , distance 302</option>
   </select>
   <button type="button" onclick="selectPOIs()">生成图结构</button>
</form>

预期输出 #

选择起始节点、多选关联终点后，输出按节点分组的无向图结构对象，两点间距离双向存储，示例结构如下：

graph = {
    T2: { T3: 46, T4: 87 },
    T4: { T2: 87 , T3 : 41}
};

原有代码问题 #

原实现存在4个核心错误导致结果不符合预期：

1. 未初始化graph对象中对应起始节点的属性，直接访问graph[edge]会得到undefined，后续赋值直接抛出类型错误
2. 未解析选项文本中的距离数值，直接把整段选项文本作为值存入，不符合数值类型的存储要求
3. 嵌套逻辑错误，无向图需要在两个关联节点下互相存储对方节点和距离，原逻辑做了多余的对象嵌套
4. 未处理起始点默认提示选项的边界情况，用户未选有效起点时取值为提示文本，会生成无效结构

修正后实现代码 #

function selectPOIs(){
    // 获取选中的起始节点
    const fromNode = document.getElementById("selectFromPOI").value;
    // 过滤未选择有效起始点的情况
    if(fromNode === "Choose a POI to Start From"){
        console.log("请先选择起始POI");
        return;
    }
    // 获取所有选中的终点选项
    const selectedToOptions = document.querySelectorAll('#selectToPOI option:checked');
    const graph = {};
    // 初始化起始节点的邻接表
    graph[fromNode] = {};

    selectedToOptions.forEach(option => {
        const toNode = option.value;
        // 从选项文本中提取距离数值，转成整数
        const distance = parseInt(option.textContent.match(/distance (\d+)/)[1], 10);
        // 起点邻接表存入终点和距离
        graph[fromNode][toNode] = distance;
        // 无向图双向存储：初始化终点的邻接表（如果不存在），存入起点和距离
        if(!graph[toNode]){
            graph[toNode] = {};
        }
        graph[toNode][fromNode] = distance;
    });

    console.log('生成的图结构：', JSON.stringify(graph, null, 2));
    return graph;
}

代码说明：如果业务场景是有向图，只需要删除双向存储的对应逻辑即可；如果需要支持多次选择累加图结构，只需要把graph的定义移到函数外部作为全局变量，去掉每次初始化graph[fromNode] = {}的覆盖逻辑即可。

内容的提问来源于stack exchange，提问作者Mohit H