个人中心
gpt4 book ai didi

javascript - 如何使用纯 JavaScript 中的一个递归函数动态创建一个依赖选择列表？

转载 作者：行者123 更新时间：2023-11-28 05:53:23 25 4
gpt4 key购买 nike

following image显示需要创建的列表结构。使用递归函数，它可以重复用于 n 个选项。怎么办？

这是我的 Javascript 代码，下面是我编写的 HTML:

        var gender = ['male', 'female'];
        
        var male = {
            hair: ["Facial hair preferred?","Hair","No Hair"],
    
            complexion: ["Preferred Complexion?","Pale","Dark"],
    
            build: ["Build Type?","Strong","Weak"]
        }

        //Female Object
        var female = {
            hair: ["Hair Color?","Blonde","Brunette"],
    
            height: ["Preferred Height?","Tall","Short"],
    
            eyes: ["Preferred Eyes?","Green","Blue"]
        }
        
        function build(sel){
            var selValue = sel;
            if(selValue == gender[0]){
                //console.log('male');
                
                var sEle = document.createElement('select');
                document.getElementsByTagName('body')[0].appendChild(sEle);
                
                for(var i=0; i<male.hair.length; ++i){
                    var oEle = document.createElement('option');
                
                    if(i == 0){
                        oEle.setAttribute('disabled','disabled');
                        oEle.setAttribute('selected','selected');
                    }
                    
                var optionText = document.createTextNode(male.hair[i]);
                oEle.appendChild(optionText);
                document.getElementsByTagName('select')[1].appendChild(oEle);
                }
            }else{
                //console.log('female');
                var sEle = document.createElement('select');
                document.getElementsByTagName('body')[0].appendChild(sEle);
                
                for(var i=0; i<female.hair.length; ++i){
                    var oEle = document.createElement('option');
                    
                    if(i == 0){
                        oEle.setAttribute('disabled','disabled');
                        oEle.setAttribute('selected','selected');
                }
                    
                var optionText = document.createTextNode(female.hair[i]);
                oEle.appendChild(optionText);
                document.getElementsByTagName('select')[1].appendChild(oEle);
            }
        }
    
        }
<body>
    
    <h4>Select Sex </h4>
    <select name="sel1" id="sel1" onchange="build(this.value)">
        <option value="" selected disabled>Select Sex</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    
    
    
</body>

但是我被困住了，无法再创作了。此外，我无法创建可以对任何数据重用的递归函数。

最佳答案

您可以创建一个具有树层次结构的对象，如下所示:

function Node(msg, treeChildNodes)
{
  var _node = this;
  this.msg = msg;
  this.treeChildNodes = treeChildNodes;
  
  this.completed = function() {
    console.log(this.value);
    this.disabled = true;
    
    if (_node.treeChildNodes[this.value])
      _node.treeChildNodes[this.value].renderTo(_node.container);
    else
    {
      console.log('the leaf! end test');
      $("<button/>").text('Finish test').appendTo(_node.container);
    }
  };
  
  this.renderTo = function(container) {
    _node.container = container;
    $("<p/>").text(_node.msg).appendTo(container);
    var $select = $("<select/>").appendTo(container).change(this.completed);
    
    $("<option/>").text("Not selected...").appendTo($select);
    for (var childKey in this.treeChildNodes)
    {
        $("<option/>").text(childKey).appendTo($select);
    }
  };
}

var tree = new Node('Men or Women?', {
    'M': new Node('Facial hair?', {
      'Hair': new Node('Complexion', {
        'D': null,
        'L': null
      }),
      'No Hair': new Node('Build', {
        'B': null,
        'S': null
      })                 
    })
  });
      
tree.renderTo('body');
select {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，我还没有实现这棵树的女性部分，这只是一个示例，您可以轻松地自己实现:)

顺便说一句，通过这种方法，你的树实际上不应该是一棵树。例如，您的测试问题可以拆分一次，然后聚集回单个分支。

关于javascript - 如何使用纯 JavaScript 中的一个递归函数动态创建一个依赖选择列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37917700/

25 4 0
文章推荐： swift - ARKit——在不可见平面下渲染 3D 对象
文章推荐： javascript - 来自 JSON 的每个元素的动态 CSS
文章推荐： html - 如何在一条直线上居中链接列表。 CSS
文章推荐： javascript - 数据未通过 wp_localize_script 正确传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com