Javascript 决策树交互式前端

在前端，我希望用户能够根据自己的选择更改决策树的结果

我正在构建一个Django React应用程序，对于决策树，我使用了CodePlayer的样式和树示例

我需要创建一个无序列表，它将被绘制为决策树

用户可以选择4个选项，名称选项1、2、3和4。这些应该改变决策树的样式，以帮助用户可视化。就像用户在组合框中选择选项1一样，我希望选项1框以另一种颜色显示。 最后，如果有一种方法可以高亮显示从父级到所选叶的所有路径，那将是非常棒的

*{
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
/*空白：nowrap*/
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 1px 0 1px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树：独生子女{
填充顶部：0；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px 3px；
文字装饰：无；
颜色：#666；
/*字体系列：arial、verdana、tahoma*/
显示：内联块；
/*单词包装：打断单词*/
单词break：打破一切；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}

函数选择选项（）{
$（“.changed”）.removeClass（“changed”）；
var e=document.getElementById（“演示”）；
var value=e.options[e.selectedIndex].value；
$（“a[dataValue=”“+value+”]）。父项（“li”）。addClass（“已更改”）；
$（“a[dataValue=”“+value+”）））.parents（“ul”）.addClass（“已更改”）；
}
/*$（“a”）。在（“单击”，函数（）{
$（“.changed”）.removeClass（“changed”）；
$（此）.parents（“li”）.addClass（“已更改”）；
$（此）.parents（“ul”）.addClass（“已更改”）；
})*/

*{
保证金：0；
填充：0；
}
树胶{
填充顶部：20px；
位置：相对位置；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
李先生{
/*空白：nowrap*/
浮动：左；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：20px 1px 0 1px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
/*我们将使用：：before和：：after来绘制连接器*/
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：20px；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
/*我们需要移除元素中的左右连接器，而不需要
有兄弟姐妹吗*/
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
/*删除单个子对象顶部的空间*/
李树：独生子女{
填充顶部：0；
}
/*将垂直连接件添加回最后一个节点*/
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
-webkit边界半径：0 5px 0；
-moz边界半径：0 5px 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
-webkit边界半径：5px 0；
-moz边界半径：5px 0；
}
/*从父级添加向下连接器的时间到了*/
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：20px；
}
李树先生{
边框：1px实心#ccc；
填充物：5px 3px；
文字装饰：无；
颜色：#666；
/*字体系列：arial、verdana、tahoma*/
显示：内联块；
/*单词包装：打断单词*/
单词break：打破一切；
边界半径：5px；
-webkit边界半径：5px；
-moz边界半径：5px；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
}
.李树.变了：：以前，
.tree li.更改：：之后{
边框顶部：1px纯红；
}
.tree li.更改：：之后{
左边框：1px纯红；
}
.tree li.更改：最后一个孩子：：之前{
右边框：1px纯红；
}
.tree ul.changed:：before{
左边框：1px纯红；
}
/*从第一个子系统上拆下左侧接头并拆下
上一个子节点的右连接器*/
李先生