Question

我有一个运行良好的JavaScript函数，但我想对其进行更改以接受传入的数组，并在函数中使用循环来访问数组中的每个元素。

当前，该函数正在作为字符串分别传递参数。 (input1, input2, input3)。这是不切实际的，因为我在许多页面上都使用了此功能，并且某些页面可能具有更多或更少的输入。如果我可以传递数组并遍历数组并获得相同的最终功能，那么它将是动态的。

它的作用是，如果下拉列表中未选择输入字段，它将隐藏输入字段。如果我从下拉列表中选择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;
    }
}

选择下拉列表：

<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';
        }

      }
    }
}

选择下拉列表：

<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个输入，如果选择为All，则隐藏所有输入。为了隐藏所有输入并仅取消隐藏下拉菜单中选择的输入，我在他的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 Dropdown

2 个答案: