JavaScript Конвертировать в динамический выпадающий список с массивом, переданным в функцию - PullRequest
Новая
       13

JavaScript Конвертировать в динамический выпадающий список с массивом, переданным в функцию

0 голосов
/ 01 декабря 2018

У меня есть эта функция JavaScript, которая прекрасно работает, но я хочу изменить ее, чтобы она принимала переданный массив и использовала цикл в функции для доступа к каждому элементу в массиве.

В настоящее время функцияпередаваемые аргументы отдельно в виде строк.(input1, input2, input3).Это не практично, потому что я использую эту функцию на многих страницах, и некоторые страницы могут иметь более или менее входные данные.Это будет динамично, если я смогу пропустить массив и цикл через него и получить ту же самую конечную функциональность.

Что он делает, так это скрывает поля ввода, если они не выбраны в раскрывающемся списке.Если я выберу 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>

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Основываясь на ответе Рикина, я отредактировал его, чтобы получить нужную функциональность, которая заключается в том, чтобы скрыть все входные данные, кроме той, которая соответствует выбору в раскрывающемся списке.

Ответот 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>
0 голосов
/ 01 декабря 2018

Устранено отвлечение внимания и сосредоточено на том, что вы, вероятно, ищете, - на динамическом вводе, передаваемом функции, и установке стиля на основе выбранного ввода. 

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