使用 <Select> 将“相同”的多个 <Button> 函数转换为通用函数

Question

我有多个按钮，它们的功能都非常相似。我如何使用 <select> 框和一个 <button> 来用更少的 javascript 做同样的事情？

这些是我想用一个按钮变成<select> 框的按钮：

<button onclick="SaveAsHTML()">Save As HTML</button>
<button onclick="SaveAsJS()">Save As JS</button>
<button onclick="SaveAsCSS()">Save As CSS</button>
<button onclick="SaveAsTXT()">Save As TXT</button>

这是我现在的 javascript：

function SaveAsHTML()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".html";
}

function SaveAsCSS()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".css";
}

function SaveAsJS()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".JS";
}

function SaveAsTXT()
{
    var filename = document.getElementById("txtFilename").value;
    var filename = filename + ".txt";
}

Answer 1

这是一个sn-p，我认为不需要太多解释。

我创建了一个文件类型数组，并使用 jquery 用<option>s 填充<select>。然后我只查找点击save按钮时选择了哪一个...

var types = [
  {"extension": "html", "name": "HTML"},
  {"extension": "txt", "name": "Plain Text"},
  {"extension": "js", "name": "Javascript"},
  {"extension": "css", "name": "CSS"},
]
types.forEach(function(type) {
  $opt = $("<option>").attr("value", type.extension).text(type.name)
  $("#saveas").append($opt)
})

function SaveAsType()
{
    console.log($("#saveas").val())
    /**
     * Put your code here and replace:
     document.getElementById("inputFileNameToSaveAs").value + ".html";
     * with
     document.getElementById("inputFileNameToSaveAs").value + "." + $("#saveas").val();
     */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Save as <select id="saveas">
</select><button onclick="SaveAsType()">save</button>