Javascript 如何使值显示在输入框中

这是我第一次编码，我正在尝试在我的网站上创建一个功能，在我从下拉菜单中选择一个项目后，与该项目对应的值将显示在我创建的输入框中。例如，如果我从下拉菜单中选择“苹果”，值“1.2”和“4.00”将分别显示在“磅”和“成本”输入框中

我已经为下拉菜单和输入框编写了使用HTML和JS的代码，并将与项目对应的数据存储在csv文件中。现在，值显示在输入框中只是因为我在JS中为此编写了代码。HTML文件是否有办法从csv文件中读取我的数据并在我的输入框中显示该数据？以下是我到目前为止的情况

<div id="cs-element">
  <label id="cs-element-label">Elements</label>
</div>

<select onChange="dropdownTip(this.value)" name="search_type" style="margin-right:10px; margin-top:2px;">
 <option selected="selected">Choose Element</option>
 <option>Methane</option>
 <option>Ethane</option>
 <option>Propane</option>
 <option>n-Butane</option>
</select>

<div id="result"></div>

<script type="text/javascript">
 function dropdownTip(value){
   console.log(value);
    document.getElementById("myText").value="190.6";
    document.getElementById("myText1").value="45.99";
    document.getElementById("myText2").value="0.012";
 }
</script>

<div id="cs-tc" class="col-sm-4 text-center">
  <label id="cs-tc-label" class="control-label">Critical Temperature (K)</label>
 <input type="text" id="myText" value=" " class="form-control" name="cs_tc">
</div>

<div id="cs-pc" class="col-sm-4 text-center">
  <label id="cs-pc-label" class="control-label">Critical Pressure (atm)</label>
  <input type="text" id="myText1" value=" " class="form-control" name="cs_pc">
</div>

<div id="cs-acc" class="col-sm-4 text-center">
  <label id="cs-acc-label" class="control-label">Accentric Factor</label>
  <input type="text" id="myText2" value=" " class="form-control" name="cs_acc">
</div>

<script>
$(document).ready(function() {
  $.ajax({
    type: "GET",
    url: "B1_1.csv", //read csv file
    dataType: "text",
    success: function(data) {processData(data);}
   });
});

function processData(allText) {
 var allTextLines = allText.split("/\r\n|\n/");
 var headers = allTextLines[0].split(',');
 var lines = [];

 for (var i=1; i<allTextLines.length; i++) {
  var data = allTextLines[i].split(',');
  if (data.length == headers.length) {

   var tarr = [];
   for (var j=0; j<headers.length; j++) {
    tarr.push(headers[j]+":"+data[j]);
   }
   lines.push(tarr);
  }
 }
}
</script>

元素
选择元素
甲烷
乙烷
丙烷
正丁烷
函数下拉提示（值）{
console.log（值）；
document.getElementById（“myText”）.value=“190.6”；
document.getElementById（“myText1”）.value=“45.99”；
document.getElementById（“myText2”）.value=“0.012”；
}
临界温度（K）
临界压力（atm）
重音因子
$（文档）.ready（函数（）{
$.ajax({
键入：“获取”，
url:“B1_1.csv”//读取csv文件
数据类型：“文本”，
成功：函数（数据）{processData（数据）；}
});
});
函数processData（allText）{
var allTextLines=allText.split（“/\r\n | \n/”；
var headers=allTextLines[0]。拆分（'，'）；
var行=[]；
对于（var i=1；i如果我理解您的要求，则不可能从html中读取文件。使用html中的表单可以上载文件，但事件由javascript处理。
如果我理解您的要求，则不可能从html中读取文件。使用html中的表单可以上载文件，但事件由javascript处理
看看这个库。它有一个名为的组件，允许使用JavaScript获取服务器数据。它可以用来读取JSON和CSV文件的内容。
看看这个库。它有一个名为的组件，允许使用JavaScript获取服务器数据。它可以用来读取JSON和CSV文件的内容。
是的，当然是可能的，您发布的代码就是这样做的，我知道最初可能会让人困惑，但让我解释一下javascript部分

<script> 
// in html you use script tag to put javascript code inside and using jquery, you // can easily modify the html page.

$(document).ready(function() { 
// this is a jquery piece of code that is calling an // ajax request

  $.ajax({
    type: "GET",
    url: "B1_1.csv", //read csv file
    dataType: "text",
    success: function(data) {processData(data);}
   });
});

function processData(allText) { 
// a method is a piece of code that you write once because you know that you will // reuse it and it makes the code more readable

 var allTextLines = allText.split("/\r\n|\n/"); 
// split is a method that takes as input a string and (in this case `allText`) //literally split the calling string in n strings storing them in an array. The //strings are splitted by the string you passed as parameter. In this case this //piece of code is simply dividing the entire text in n lines

 var headers = allTextLines[0].split(','); 
// Now is splitting the line number 1 (look for 0-indexed array on google) in many // strings
 var lines = [];

 for (var i=1; i<allTextLines.length; i++) {
 // A for loop is a loop that repeat itself n-times until a condition is no more 
 // satisfied, in this case i has to be smaller than the length of that array.
 // `var i=1` represents the starting point of the index.
 // `i<allTextLines.length` is the condition and `allTextLines.length` returns the 
 // length of the array.
 // In the end `i++` just increment i every time the loop reach the end and restart

  var data = allTextLines[i].split(',');
  if (data.length == headers.length) {
    // an if statement is a piece of code that is executed if and only if a condition 
    // is satisfied.

   var tarr = [];
   for (var j=0; j<headers.length; j++) {
    tarr.push(headers[j]+":"+data[j]);
   }
   lines.push(tarr); // The push method add to an array a new element
  }
 }
}
</script>


//在html中，使用script标记将javascript代码放入其中，使用jquery//可以轻松修改html页面。
$（文档）.ready（函数（）{
//这是一段调用//ajax请求的jquery代码
$.ajax({
键入：“获取”，
url:“B1_1.csv”//读取csv文件
数据类型：“文本”，
成功：函数（数据）{processData（数据）；}
});
});
函数processData（allText）{
//方法是一段代码，您只需编写一次，因为您知道您将//重用它，并且它使代码更具可读性
var allTextLines=allText.split（“/\r\n | \n/”；
//split是一种将字符串作为输入的方法，并且（在本例中为'allText`）//将调用字符串按字面意思拆分为n个字符串，并将它们存储在数组中。//字符串按作为参数传递的字符串进行拆分。在本例中，//这段代码只是将整个文本拆分为n行
var headers=allTextLines[0]。拆分（'，'）；
//现在正在将行号1（在google上查找0索引数组）拆分为许多//字符串
var行=[]；
对于（var i=1；i年前。
是的，当然是可能的，您发布的代码正在这样做，我知道最初可能会让人困惑，但让我解释一下javascript部分

<script> 
// in html you use script tag to put javascript code inside and using jquery, you // can easily modify the html page.

$(document).ready(function() { 
// this is a jquery piece of code that is calling an // ajax request

  $.ajax({
    type: "GET",
    url: "B1_1.csv", //read csv file
    dataType: "text",
    success: function(data) {processData(data);}
   });
});

function processData(allText) { 
// a method is a piece of code that you write once because you know that you will // reuse it and it makes the code more readable

 var allTextLines = allText.split("/\r\n|\n/"); 
// split is a method that takes as input a string and (in this case `allText`) //literally split the calling string in n strings storing them in an array. The //strings are splitted by the string you passed as parameter. In this case this //piece of code is simply dividing the entire text in n lines

 var headers = allTextLines[0].split(','); 
// Now is splitting the line number 1 (look for 0-indexed array on google) in many // strings
 var lines = [];

 for (var i=1; i<allTextLines.length; i++) {
 // A for loop is a loop that repeat itself n-times until a condition is no more 
 // satisfied, in this case i has to be smaller than the length of that array.
 // `var i=1` represents the starting point of the index.
 // `i<allTextLines.length` is the condition and `allTextLines.length` returns the 
 // length of the array.
 // In the end `i++` just increment i every time the loop reach the end and restart

  var data = allTextLines[i].split(',');
  if (data.length == headers.length) {
    // an if statement is a piece of code that is executed if and only if a condition 
    // is satisfied.

   var tarr = [];
   for (var j=0; j<headers.length; j++) {
    tarr.push(headers[j]+":"+data[j]);
   }
   lines.push(tarr); // The push method add to an array a new element
  }
 }
}
</script>


//在html中，使用script标记将javascript代码放入其中，使用jquery//可以轻松修改html页面。
$（文档）.ready（函数（）{
//这是一段调用//ajax请求的jquery代码
$.ajax({
键入：“获取”，
url:“B1_1.csv”//读取csv文件
数据类型：“文本”，
成功：函数（数据）{processData（数据）；}
});
});
函数processData（allText）{
//方法是一段代码，您只需编写一次，因为您知道您将//重用它，并且它使代码更具可读性
var allTextLines=allText.split（“/\r\n | \n/”；
//split是一种将字符串作为输入的方法，并且（在本例中为'allText`）//将调用字符串按字面意思拆分为n个字符串，并将它们存储在数组中。//字符串按作为参数传递的字符串进行拆分。在本例中，//这段代码只是将整个文本拆分为n行
var headers=allTextLines[0]。拆分（'，'）；
//现在正在将行号1（在google上查找0索引数组）拆分为许多//字符串
var行=[]；
对于（var i=1；我几年前就开始读了。
我只对HTML和JS略知一二。我能从JS中读取我的csv文件吗？我只对HTML和JS略知一二。我能从JS中读取我的csv文件吗？我浏览了链接，第二个链接中名为“model_cd_from_txt”的部分吸引了我的眼球。在它上面写着“items”的部分我需要在那里再次输入数据吗？据我所知，您需要将w3data.php文件下载到服务器。您需要创建一个描述应用程序的模型文件。例如：model_cd_from_txt.js。该文件应与w3data.php位于同一文件夹中。该模型文件包含数据文件的名称，例如：cd_catalog.txt、 它还包含csv文件列的描述。主要数据在cd_catalog.txt中。来自_txt.js的模型文件model_cd_描述了我通过链接阅读的数据文件的列，第二个链接中名为“model_cd_from_txt”的部分吸引了我的眼球。在它说“items”的部分我需要在那里再次输入数据吗？据我所知，您需要将w3data.php文件下载到服务器。您需要创建一个描述应用程序的模型文件。例如：model_cd_from_txt.js。该文件应与w3data.php位于同一文件夹中。该模型文件包含数据文件的名称，例如：cd_catalog.txt、 它还包含csv文件列的说明