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