如何使值显示在输入框中

这是我第一次编码,我正在尝试在我的网站上创建一个功能,在我从下拉菜单中选择一个项目后,与该项目对应的值将显示在我创建的输入框中。例如,如果我从下拉菜单中选择“苹果”,值“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) {

   }

   lines.push(tarr);

  }

 }

}

</script>


犯罪嫌疑人X
浏览 213回答 0
0回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript