Question

我现在有一个页面上有一定数量的下拉列表（4），这些下拉列表用于从列表中选择数据并提交。它用于选择锦标赛的球队，所以目前我只能创建一个有4支球队的锦标赛。

我想更改它，以便页面只显示一个下拉列表，例如Enter a number of teams，用户选择4/8/16/32。根据用户选择的号码，页面应生成此数量的下拉列表。

我很难做到这一点，无论用户选择什么号码，页面都需要提供相应数量的下拉菜单并相应地命名，即#team1, #team2, #team3。

任何想法如何做到这一点？

这是我目前的下拉菜单，使用Jade模板，对不起，如果使用Jade有任何混淆，但很容易理解它是什么：

div.newMatch
  form.form-horizontal(action='/tournament', id="tournamentForm")
        div.row
      label.control-label(for="tournamentName") Tournament Name:
      div.controls
        input#tournamentName.input-mysize(type="text")
    div.row
      label.control-label(for="team1") Team 1:
      div.controls
        select#team1(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team2") Team 2:
      div.controls
        select#team2(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team3") Team 3:
      div.controls
        select#team3(style='width: 160px;')
            include teamsDropDown
    div.row
      label.control-label(for="team4") Team 4:
      div.controls
        select#team4(style='width: 160px;')
            include teamsDropDown

我尝试过的事情：

                div.row
                    label.control-label(for="tournamentName") Tournament Name:
                    div.controls
                        input#tournamentName.input-mysize(type="text")
                div.row
                    label.control-label(for="nTeamSelector") Tournament Size:
                    div.controls
                        select#nTeamSelector(style='width: 160px;')
                            option Please select...
                            option 2
                            option 4
                            option 8
                            option 16
                            option 32
                div.row.hidden#rowTemplate
                    label.control-label(for="team") Team:
                    div.controls
                        select#team1(style='width: 160px;')
                            include teamsDropDown
                div.row#rowContainer
                script(type='text/javascript')
                    $("#nTeamSelector").change(function(){
                        var nTeams = $("#nTeamSelector").val(); // Get the value of the team selector that you use
                        $("#rowContainer").empty() // Delete all existing dropdowns
                        for (var i=0; i<nTeams; i++){
                            var newRow = $("#rowTemplate").clone(); // Exact copy of the element generated by Jade
                            /*
                                * here you should change all the little fields that 
                                * make the dropdowns different. For example:
                            */
                            newRow.children(".control-label").setText("Team "+(i+1)+":");
                            $("#rowContainer").append(newRow);
                        }
                    });

Answer 1

Jade不仅是服务器端：您还可以编译Jade模板以运行客户端。如果我跑：

$ jade --client template.jade

我会找到一个template.js文件，其中包含一些我可以在客户端使用的代码（只要我包含runtime.js）。生成的JavaScript文件将声明一个名为anonymous的函数，您可以像往常一样为模板传递局部变量。

如果我有一个包含这个的模板文件：

div.row
  label.control-label(for=id) Team 1:
  div.controls
    select(id=id, style='width: 160px;')
        include teamsDropDown

然后，假设它不使用变量，您几乎可以使用普通代码进行追加：

$(anonymous({id: "team" + (teamCounter++)})).appendTo("#tournamentForm");

（或类似的东西;我相信你可以搞清楚）

顺便说一句，如果您使用的是Node.js和Browserify 1，则可以使用simple-jadeify来简化编译。

Answer 2

我没有和Jade一起工作，但是如果你可以在你的页面中编写javascript并使用jquery（如标签所述）你可以这样做：

首先在页面中添加隐藏的teamRow。你将克隆它。这可能看起来很糟糕，但它允许您使用您正在使用的特殊语法为模板中的每个团队选择器创建一个基本模型。

div.row.hidden#rowTemplate
  label.control-label(for="team") Team:
  div.controls
    select#team1(style='width: 160px;')
        include teamsDropDown

使用Javascript：

$("#nTeamSelector").change(function(){

    var nTeams = //get the value of the team selector that you use

    $("#rowContainer").empty() //Delete all existing dropdowns

    for (var i=0; i<nTeams; i++){

        var newRow = $("#rowTemplate").clone(); //exatc copy of the element generated by Jade

        /*
         * here you should change all the little fields that 
         * make the dropdowns different. For example:
         */

        newRow.children(".control-label").setText("Team "+(i+1)+":");


        $("#rowContainer").append(newRow);

    }
});

我遗漏了像rowContainer这样的东西，它是一个简单的div，或隐藏了类的css（但我认为这些与问题无关）。

我还没有做过Jade中的for，它可能只会改变标签的一个属性，也许你应该改变输入的id。但这只是另一对简单的javascript行。

Javascript - 根据输入显示'n'个文本框（由jade生成）。

2 个答案: