JavaScript 转换为动态 Select 下拉列表，其中数组传入函数

Question

我有一个工作正常的 JavaScript 函数，但我想改变它以接受传入的数组并在函数中使用循环来访问数组中的每个元素。

目前，该函数正在作为字符串分别传递参数。 (input1, input2, input3)。这是不实用的，因为我在很多页面上都使用了这个功能，有些页面可能有或多或少的输入。如果我可以传递一个数组并循环遍历它并获得相同的最终功能，它将是动态的。

它的作用是隐藏未在下拉列表中 select 的输入字段。如果我从下拉列表中选择 select PO，它会显示用于输入采购订单编号的输入字段。

该函数在 select 的 onChange 事件中启动。

这是我的原始代码。

JavaSCript函数：

// javascript
function changetextbox(input1, input2, input3) {

    var sel = document.getElementById("sel");
    var in1 = document.getElementById(input1);
    var in2 = document.getElementById(input2);
    var in3 = document.getElementById(input3);
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

    if (sel.value === "All") {
        in1.style.display='none';
        in2.style.display='none';
        in3.style.display='none';
        in3.value = "";
    } else if (sel.value === input1) {
        in1.style.display='inline';
        in2.style.display='none';
        in3.style.display='none';
        in3.value = "";
    } else if (sel.value === input2) {
        in1.style.display='none';
        in2.style.display='inline';
        in3.style.display='none';
        in3.value = "";
    } else if (sel.value === input3) {
        in1.style.display='none';
        in2.style.display='none';
        in3.style.display='inline';
        in3.value = date;
    }
}

Select 下拉形式：

<form method="post">
  <input type="text" id="PO" name="PO" value="" placeholder="Enter PO" style="display:none">
  <input type="text" id="OrderID" name="OrderID" value="" placeholder="Enter OrderID" style="display:none">
  <input type="date" id="CreatedTime" name="CreatedTime" value="" max="2018-11-30" style="display:none">
  <select id="sel" name="sel" onChange="changetextbox('PO, OrderID, CreatedTime');">
    <option value="All">All</option>
    <option value="PO">PO</option>
    <option value="OrderID">OrderID</option>
    <option value="CreatedTime">Date</option>
  </select>
  <input type="submit" value="Search">
</form>

下面是我的新代码，目前还不能使用，因为我不确定我还需要对它做什么。

JavaScript:

function changetextbox(input) {

    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

    var sel = document.getElementById("sel");
    var len = input.length;
    var inp;

    for (i=0; i<len; ++i) {
      if (i in input) {
        inp[i] = document.getElementById(input);

        if (sel.value === "All") {
            inp[i].style.display='none';
        } else {
            inp[i].style.display='inline';
        }

      }
    }
}

Select 下拉形式：

<form method="post">
  <input type="text" id="PO" name="PO" value="" placeholder="Enter PO" style="display:none">
  <input type="text" id="OrderID" name="OrderID" value="" placeholder="Enter OrderID" style="display:none">
  <input type="date" id="CreatedTime" name="CreatedTime" value="" max="2018-11-30" style="display:none">
  <select id="sel" name="sel" onChange="changetextbox(dropdown);">
    <option value="All">All</option>
    <option value="PO">PO</option>
    <option value="OrderID">OrderID</option>
    <option value="CreatedTime">Date</option>
  </select>
  <input type="submit" value="Search">
</form>

JavaScript 传递给函数的数组

JavaScript变量：

<script>
var dropdown = ["PO","OrderID","CreatedTime"];
</script>

Answer 1

消除干扰并专注于您可能正在寻找的内容，即传递给函数的动态输入并根据所选输入设置样式。

var dropdown = ["PO", "OrderID", "CreatedTime"];

function myFunction(inputs) {
  var x = document.getElementById("mySelect").value;
  var displayStyle = 'inline';
  if (x === 'All') displayStyle = 'none';
  inputs.map(function(input) {
    document.getElementById(input).style.display = displayStyle;
  });
}

Select Dropdown Form:

<form method="post">
  <input type="text" id="PO" name="PO" value="" placeholder="Enter PO" style="display:none">
  <input type="text" id="OrderID" name="OrderID" value="" placeholder="Enter OrderID" style="display:none">
  <input type="date" id="CreatedTime" name="CreatedTime" value="" max="2018-11-30" style="display:none">

  <select id="mySelect" name="mySelect" onchange="myFunction(dropdown)">
    <option value="All">All</option>
    <option value="PO">PO</option>
    <option value="OrderID">OrderID</option>
    <option value="CreatedTime">Date</option>
  </select>
  <input type="submit" value="Search">
</form>

Answer 2

根据 Rikin 的回答，我进一步编辑它以获得我正在寻找的功能，即隐藏除与下拉列表中的选择相对应的输入之外的所有输入。

Riken 的回答在进行选择时取消隐藏所有 3 个输入，然后如果选择是全部则隐藏所有输入。为了隐藏所有输入并仅取消隐藏在下拉列表中选择的输入，我将 index-inputs 添加到他的 map(function).

通俗地说，

var index = sel.selectedIndex; = 按键下拉选择。

index-inputs = 当从下拉列表中选择输入时，简单地将输入排除在隐藏之外。

var dropdown = ["PO","OrderID","CreatedTime"];

function changetextbox(inputs) {
 
 function day_of_the_month(d) { 
   return (today.getDate() < 10 ? '0' : '') + today.getDate();
 }
 
 var today = new Date();
 var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+day_of_the_month(today);
 
 var sel = document.getElementById("sel");
 var index = sel.selectedIndex;
 var optVal = sel.options[index].value;
 var optTxt = sel.options[index].text;
 var inp = document.getElementById(optVal);
 
 index-inputs.map(function(input) {
   document.getElementById(input).style.display = "none";
   document.getElementById(input).value = '';
 });
 
 if(index !== 0) {
  if (inp.style.display === "none") {
   inp.style.display = "inline";
   
   if (optTxt === "Date" ) {
    inp.value = date;
   }
  }
 }

}

<form method="post">
  <input type="text" id="PO" name="PO" value="" placeholder="Enter PO" style="display:none">
  <input type="text" id="OrderID" name="OrderID" value="" placeholder="Enter OrderID" style="display:none">
  <input type="date" id="CreatedTime" name="CreatedTime" value="" max="2018-12-02" style="display:none">
  <select id="sel" name="sel" onChange="changetextbox(dropdown);">
    <option value="All">All</option>
    <option value="PO">PO</option>
    <option value="OrderID">OrderID</option>
    <option value="CreatedTime">Date</option>
  </select>
  <input type="submit" value="Search">
</form>

JavaScript 转换为动态 Select 下拉列表，其中数组传入函数

JavaScript Convert to a dynamic Select Dropdown with array passed in function

html

javascript

arrays

input-field

drop-down-menu