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

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

转载作者：行者123 更新时间：2023-11-28 05:53:23

25

4

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 正确传递

JavaScript 递归
在本教程中，您将借助示例了解 JavaScript 中的递归。递归是一个调用自身的过程。调用自身的函数称为递归函数。递归函数的语法是： function recurse() {
'new'方法中的C#递归
我的类(class) MyClass 中有这段代码: public new MyClass this[int index] { get {
PHP通过FTP下载整个文件夹(递归)
我目前有一个非常大的网站，大小约为 5GB，包含 60,000 个文件。当前主机在帮助我将站点转移到新主机方面并没有做太多事情，我想的是在我的新主机上制作一个简单的脚本以 FTP 到旧主机并下载整个
Java - 递归
以下是我对 AP 计算机科学问题的改编。书上说应该打印00100123我认为它应该打印 0010012但下面的代码实际上打印了 3132123 这是怎么回事？而且它似乎没有任何停止条件？! publi
Kotlin 递归
fun fact(x: Int): Int{ tailrec fun factTail(y: Int, z: Int): Int{ if (y == 0) return z
在C中创建和显示线性链表(递归)
我正在尝试用c语言递归地创建线性链表，但继续坚持下去，代码无法正常工作，并出现错误“链接器工具错误 LNK2019”。可悲的是我不明白发生了什么事。这是我的代码。感谢您提前提供的大力帮助。 #inc
JavaScript 递归？
我正在练习递归。从概念上讲，我理解这应该如何工作(见下文)，但我的代码不起作用。请告诉我我做错了什么。并请解释您的代码的每个步骤及其工作原理。清晰的解释比只给我有效的代码要好十倍。 /* b
Javascript 递归
我有一个 ajax 调用，我想在完成解析并将结果动画化到页面中后调用它。这就是我陷入困境的地方。我能记忆起这个功能，但它似乎没有考虑到动画的延迟。即控制台不断以疯狂的速度输出值。我认为 setIn
JavaScript 递归
有人愿意用通俗易懂的语言逐步解释这个程序(取自书籍教程)以帮助我理解递归吗？ var reverseArray = function(x,indx,str) { return indx == 0 ?
JavaScript 递归
目标是找出数组中整数的任意组合是否等于数组中的最大整数。 function ArrayAdditionI(arr) { arr.sort(function(a,b){ return a -
MySQL用序列化数据连接两个表，递归？
我在尝试获取 SQL 查询所需的所有数据时遇到一些重大问题。我对查询还很陌生，所以我会尽力尽可能地描述这一点。我正在尝试使用 Wordpress 插件 NextGen Gallery 进行交叉查询。
Python:递归
虽然网上有很多关于递归的信息，但我还没有找到任何可以应用于我的问题的信息。我对编程还是很陌生，所以如果我的问题很微不足道，请原谅。感谢您的帮助:) 这就是我想要的结果: listVariations
C练习任务(递归)
我一整天都在为以下问题而苦苦挣扎。我一开始就有问题。我不知道如何使用递归来解决这个特定问题。我将非常感谢您的帮助，因为我的期末考试还有几天。干杯假设有一个包含“n”个元素的整数数组“a”。编写递归函
Javascript 递归
我有这个问题我想创建一个递归函数来计算所有可能的数字 (k>0)，加上数字 1 或 2。数字 2 的示例我有两个可能性。 2 = 1+1 和 2 = 2 ，对于数字 3 两个 poss。 3 = 1+
以Top-Down思维去解决问题——递归
目录递归的基础递归的底层实现（不是重点）递归的应用场景编程中两种解决问题的思维自下而上（Bottom-Up）自上而下（Top-
Python数据结构与算法（4.1）——递归
0. 学习目标递归函数是直接调用自己或通过一系列语句间接调用自己的函数。递归在程序设计有着举足轻重的作用，在很多情况下，借助递归可以优雅的解决问题。本节主要介绍递归的基本概念以及如何构建递归程序。
php - 数组中所有可能的组合 - 递归？
我有一个问题一直困扰着我，希望有人能提供帮助。我认为它可能必须通过递归和/或排列来解决，但我不是一个足够好的 (PHP) 程序员。 $map[] = array("0", "1", "2", "3")
用 dplyr 递归
我有数据 library(dplyr, warn.conflicts = FALSE) mtcars %>% as_tibble() %>% select(mpg, qsec) %>% h
kdb - q - 递归/
在 q 中，over 的常见插图运算符(operator) /是 implementation of fibonacci sequence 10 {x,sum -2#x}/ 1 1 这确实打印了前 1
methods - 递归 - 一个语句中的两个调用
我试图理解以下代码片段中的递归调用。 static long fib(int n) { return n <= 1 ? n : fib(n-1) + fib(n-2); } 哪个函数调用首先被

首页

博学

6Ren·AI

商城

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