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

我最近开始使用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>

来源

2014-02-20 Jakerod

在你的情况下，每个下拉选项的value应该是没有它的名字，而是相应的围栏在fenceArray指数，这是i。然后，在primPieceModelDrop.onchange内部，您将使用fenceArray[this.value]来访问所选的栅栏对象。

所以，你需要替换此行：

dropMenuOption.value = fenceArray[i].name;

与此：

dropMenuOption.value = i;

于是重写onchange处理程序如下：

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

你是什么对初学者来说这样做是完全合理的，但是你应该明白这是一个简单的过程c，低级方法。随着您对JS更加自信，随着项目的增长，您可能会发现使用框架如AngularJS更容易。

来源

2014-02-20 20:54:41

非常感谢。我需要去工作，所以我没有多少时间来检查它，但在我的快速检查中，它似乎正在做我需要它做的事情。谢谢。 – Jakerod

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

回答

相关问题