从下拉列表生成 .txt 文件

Question

其实这对于懂html编程的人来说是一件容易的事，可惜我不是这个领域的...

想问一下如何在html文件同目录下创建一个可以生成.txt的html文件。在这种情况下，我想将该文本用于电气家庭自动化。

我需要 2 个包含 2 个选项列表的下拉列表

第一个称为 'LAMP' 并包含 2 个选项：“ON”和“OFF”

第二个称为 'BLOWER'，还包含：“ON”和“OFF”

我还需要一个按钮。按下按钮时，此 html 根据选择的选项生成 .txt 个文件。

查看截图看我的界面说明

如果按下生成的按钮，它将像这样

示例：

如果 LAMP 开启且 BLOWER 关闭则生成文件中的文本应为“10”

如果 LAMP 关闭且 BLOWER 打开，则生成文件中的文本应为“01”

有人可以帮我 .html 代码吗？谢谢

Answer 1

您可以利用 select 元素，a 元素和 download 属性，href 设置文本文件的 data URI 表示。

var select = document.querySelector("select");
select.addEventListener("change", function(e) {
  var text = e.target.value === "LAMP" ? "10" : "01";
  var file = "data:text/plain," + text;
  var a = document.createElement("a");
  a.download = e.target.value + "-" + new Date().getTime();
  a.href = file;
  document.body.appendChild(a);
  a.onclick = function() {
    this.parentElement.removeChild(this)
  };
  a.click();
})

<label for="select">Please select an option:</label>
<select id="select">
  <option></option>
  <option value="LAMP">LAMP</option>
  <option value="BLOWER">BLOWER</option>
</select>

Answer 2

我从@guest271314上面的回答中复制了部分下载内容。感谢他。我相信你想要这样的东西：

JSFIDDLE 示例 LINK: https://jsfiddle.net/zpp4hr21/

更新：

完整的 html 文件代码根据 OP 的评论将是：

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
  <script type="text/javascript">
    $("#generate").on("click", function(e){
        var lamp = $("#lamp").val();
        var blower = $("#blower").val();

        if (lamp == "Select") {
            alert("Please select a value for LAMP");
        }

        if (blower == "Select") {
            alert("Please select a value for BLOWER");
        }

        if ((lamp != "Select") && (blower != "Select")) {
            var text = lamp.toString()+blower.toString();
            var file = "data:text/plain," + text;

            var a = document.createElement("a");
            a.download = e.target.value + "-" + new Date().getTime();
            a.href = file;
            document.body.appendChild(a);
            a.onclick = function() {
              this.parentElement.removeChild(this)
            };
            a.click();
          }
       });
</script>
</head>

<body>
   <label for="lamp">LAMP:</label>
   <select id="lamp">
      <option>Select</option>
      <option value="1">ON</option>
      <option value="0">OFF</option>
   </select>
   <br/>
   <label for="blower">BLOWER:</label>
   <select id="blower">
     <option>Select</option>
     <option value="1">ON</option>
     <option value="0">OFF</option>
   </select>
   <br/>
   <input type="button" id="generate" value="GENERATE">
</body>
</html>

从下拉列表生成 .txt 文件

Generate .txt files from drop down list

html

javascript

php

jscript

更新：