xm-select 父子节点关联实现精准选择 - 使用 xm-select 实现父子节点关联下拉菜单

<p>&quot;&lt;select name=&quot;select1&quot; xm-select=&quot;select1&quot;&gt;&lt;option value=&quot;&quot;&gt;请选择</option></select>&lt;select name=&quot;select2&quot; xm-select=&quot;select2&quot;&gt;&lt;option value=&quot;&quot;&gt;请选择</option></select><script>layui.use([&quot;form&quot;, &quot;xmSelect&quot;], function(){var form = layui.form;var xmSelect = layui.xmSelect;// 初始化第一个下拉框var select1 = xmSelect.render({el: &quot;select[name=select1]&quot;,style: {width: &quot;200px&quot;},filterable: true,data: [{name: &quot;选项1&quot;, value: &quot;1&quot;}, {name: &quot;选项2&quot;, value: &quot;2&quot;}, {name: &quot;选项3&quot;, value: &quot;3&quot; }],on: function(data){ // 当选择项发生变化时，更新第二个下拉框的数据select2.update({data: getChildrenData(data.arr, select2.getValue())});}});// 初始化第二个下拉框var select2 = xmSelect.render({el: &quot;select[name=select2]&quot;,style: {width: &quot;200px&quot;},filterable: true,data: [],on: function(data){ // 当选择项发生变化时，更新第一个下拉框的数据select1.update({data: getParentData(data.arr, select1.getValue())});}});// 获取指定父节点的子节点数据function getChildrenData(parentIds, selectedValue){var childrenData = [];// 根据父节点的id查询子节点数据// 将查询到的数据添加到childrenData数组中return childrenData;} // 获取指定子节点的父节点数据function getParentData(childIds, selectedValue){var parentData = [];// 根据子节点的id查询父节点数据// 将查询到的数据添加到parentData数组中return parentData;}form.render();});</script>&quot;在以上示例中，通过<code>getChildrenData</code>和<code>getParentData</code>函数模拟查询父子节点数据的过程。当第一个下拉框的选项发生变化时，会根据选中的父节点id获取对应的子节点数据，并更新第二个下拉框的数据。同理，当第二个下拉框的选项发生变化时，会根据选中的子节点id获取对应的父节点数据，并更新第一个下拉框的数据。这样就可以实现在父子节点关联的情况下，节点的精准选择。</p>