时间戳

首页 > 解决方案 > JavaScript 转换为动态选择下拉菜单，数组传入函数

javascript - JavaScript 转换为动态选择下拉菜单，数组传入函数

问题描述

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

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

它的作用是隐藏输入字段，如果它们没有在下拉列表中被选中。如果我PO从下拉列表中选择，它会显示该输入字段以输入 PO 编号。

该功能在onChange选择的情况下启动。

这是我的原始代码。

Java脚本函数：

// 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>

标签： javascripthtmlarraysdrop-down-menuinput-field

解决方案

根据 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>

推荐阅读