JavaScript转换为带有传入函数的数组的动态Select Dropdown

Question

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

目前，函数是以字符串的形式单独传递参数的。CCD_ 1。这是不实用的，因为我在很多页面上使用这个函数，有些页面可能或多或少有输入。如果我能传递一个数组并循环通过它，并获得相同的最终功能，那么它将是动态的。

它所做的是，如果没有在下拉列表中选择输入字段，它会隐藏这些字段。如果我从下拉列表中选择PO，它会显示要输入PO编号的输入字段。

该功能在选择的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时隐藏所有输入。为了隐藏所有输入，只取消隐藏在下拉列表中选择的输入，我在他的map(function)中添加了index-inputs。

简而言之，

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>