Question

我最近开始使用javascript，也许还有一些问题。我正在尝试为我的其他业余爱好创建一个工具，为x1，y1到x2，y2创建围栏坐标。

我现在挂起的部分是UI的一部分。我希望用户能够从下拉菜单中选择所需的栅栏，然后将有关栅栏的其他信息（名称，长度，宽度，方向等）填入下面的输入字段。从那里开始，他们将在我已经完成的数学部分中被引用。

我希望围栏部分成为对象，因为我最终会添加更多内容并且可能允许用户添加更多内容，并且我认为这是最简单易用的方式。

我已经设法到达下拉菜单中选项的位置，我可以选择它们，它将使用值作为名称填充片段名称，但我无法弄清楚如何访问长度，宽度，高度等。

这是我在Code Academy之外的第一个项目，我在10年前在高中做过一点点。话虽这么说，如果你注意到我做了别的蠢事，请随意指出。这里的其他问题的答案对我来说已经是一个巨大的帮助来源，因此我感谢你们，感谢你们以及未来的帮助。

<script>
        //Start Variable Library
            var dropMenuPieceName =  0;
            var dropMenuPieceName =  0;
        //End Variable Library
        // Start Function Library

            var fencePieceDropDown = function(dropDownMenuID) {

                var dropMenu = document.getElementById(dropDownMenuID); 
                for(var i = 0; i < fenceArray.length; i++) {
                    var dropMenuOption = document.createElement("option");
                    var dropMenuPieceName =  fenceArray[i].name;
                    var dropMenuPieceName =  fenceArray[i].length;
                    dropMenuOption.innerHTML = fenceArray[i].model;
                    dropMenuOption.value = fenceArray[i].name;
                    var dropMenuIndex = 1;
                    dropMenu.add(dropMenuOption,dropMenuIndex);
                };
            };
        //End Function Library
        // Start Fence Object Library

            function Fence(name,model,length,width,direction,x_offSet,y_offSet,z_offSet,r_offSet) {
                this.name = name;
                this.model = model;
                this.length = length;
                this.width = width;
                this.direction = direction;
                this.x_offSet = x_offSet;
                this.y_offSet = y_offSet;
                this.z_offSet = z_offSet;
                this.r_offSet = r_offSet;
            };

            var fenceArray = new Array();

            var plot_ohrada = new Fence
                ("plot_ohrada","plot_ohrada",3,0.1,0.02,0,0,0,0);
            fenceArray[0] = plot_ohrada;

            var plot_ohrada_pruchozi = new Fence
                ("plot_ohrada_pruchozi","plot_ohrada_pruchozi",4,0.2,0.02,0,0,0,0);
            fenceArray[1] = plot_ohrada_pruchozi;

            var plot_ohrada_zlomena = new Fence
                ("plot_ohrada_zlomena","plot_ohrada_zlomena",5,0.3,0.03,0,0,0,0);
            fenceArray[2] = plot_ohrada_zlomena;

        //End Fence Object Library
    </script>
</head>
<body>
    <form name="primPieceSection">
        <div align="center">
            Piece Model:
            <select id="primPieceModel" >
                <option value = 0>Custom Piece</option>
            <select><br /><br /><br />
            Piece Name: <input  type="text" id="primPieceName" placeholder="Insert Template Name"><br />
            Piece Length: <input type="text" id="primPieceLength" value=0><br />
            Piece Width: <input type="text" id="primPieceWidth" value=0><br />
            Piece Direction: <input type="text" id="primPieceDir" value=0><br />
        </div>
    </form>
<script>
    var primPieceNameField = document.getElementById("primPieceName");
    var primPieceLengthField = document.getElementById("primPieceLength");
    var primPieceModelDrop = document.getElementById("primPieceModel");

    primPieceModelDrop.onchange = function() {
        primPieceNameField.value = this.value; ///this should return the object's name
        primPieceLengthField.value = this.value; ///this should return the object's length. I just put in this.value while I was testing it.
    };  

    fencePieceDropDown("primPieceModel");
</script>

Answer 1

在您的情况下，每个下拉选项的value应该不是它的名称，而是fenceArray中相应栅栏的索引，即i。然后，在primPieceModelDrop.onchange内，您将使用fenceArray[this.value]来访问所选的fence对象。

所以，你需要替换这一行：

dropMenuOption.value = fenceArray[i].name;

用这个：

dropMenuOption.value = i;

然后重写onchange处理程序，如下所示：

primPieceModelDrop.onchange = function() {
    primPieceNameField.value = fenceArray[this.value].name;
    primPieceLengthField.value = fenceArray[this.value].length;
};

你所做的对初学者来说是完全合理的，但是你应该明白这是一种有点过分简单的低级方法。随着您对JS的信心增强，随着项目的增长，您可能会发现使用AngularJS等框架更容易。

根据下拉菜单选择将对象属性插入到文本字段中

1 个答案: