Question

所以我试图用一个用户选择的选项填充一个组合框。用户选择项目并单击“添加”后，我想将所选项目的文本值添加到列表中。

我的第一部分按照我的意愿工作，但是，我在将值添加到列表中时遇到了困难。老实说，我不知道如何实现它或者最好的方法是什么？如果有人能够沿着我需要研究的正确路径发送给我，以及什么样的事件听众，方法，我应该看看会很棒。我是JavaScript的新手，我很难绕过它。

到目前为止我所拥有的：

	 function changeOptions(link) {
	  if (link=="") {
		return; }
		
		switch(link) {
		case "Category1":
			var inventory=new Array (
			  "Item1",
			  "Item2",
			  "Item3");
			break;
		case "Category2":
			var inventory=new Array (
			  "Item4",
			  "Item5",
			  "Item6");
			  break;
	} 

		  
		 i = document.form.items.options.length;
		if (i > 0) {
		  document.form.items.options.length -= i; document.form.items.options[i] = null;
		}

	  for (i=0; i< inventory.length; i++) {  
	  
		document.form.items.options[i] = new Option();	
		document.form.items.options[i].text = inventory[i];
		document.form.items.options[i].value = inventory[i];
	   }
	}

<form name=form >
		  <b>Select a Category</b><br />
		  <a onclick="changeOptions('Category1')">Category1</a> | 
		  <a onclick="changeOptions('Category2')">Category2</a> 
		  <br /><br/>
		  <b>Inventory</b><br/>
		  <select name="items" multiple="multiple" style="height:150px;width:400px;">
			 <option value="">Select An Item</option>
		  </select>
		  <input type="submit" name= "add" value="Add">
	  </form>

Answer 1

我添加了一些代码，用于将所选值附加到组合框下方的列表中。我添加了一个用于提交的表单事件监听器。在提交时，我们获取选择框的值并将其添加到列表中。你可以调整它并添加验证和东西。我还在html中添加了一些id来查询JS中的元素。

var select = document.getElementById('select');
var form = document.getElementById('form');
var list = document.getElementById('list');

var addItem = function(item) {
  return '<li>' + item + '</li>';
}

var handleSubmit = function(e) {
  e.preventDefault();
  list.innerHTML += addItem(select.value);
}

form.addEventListener('submit', handleSubmit);

function changeOptions(link) {
  if (link == "") {
    return;
  }

  switch (link) {
    case "Category1":
      var inventory = new Array(
        "Item1",
        "Item2",
        "Item3");
      break;
    case "Category2":
      var inventory = new Array(
        "Item4",
        "Item5",
        "Item6");
      break;
  }


  i = document.form.items.options.length;
  if (i > 0) {
    document.form.items.options.length -= i;
    document.form.items.options[i] = null;
  }

  for (i = 0; i < inventory.length; i++) {

    document.form.items.options[i] = new Option();
    document.form.items.options[i].text = inventory[i];
    document.form.items.options[i].value = inventory[i];
  }
}

<form id="form" name=form>
  <b>Select a Category</b>
  <br />
  <a onclick="changeOptions('Category1')">Category1</a> |
  <a onclick="changeOptions('Category2')">Category2</a> 
  <br />
  <br/>
  <b>Inventory</b>
  <br/>
  <select id="select" name="items" multiple="multiple" style="height:150px;width:400px;">
    <option value="">Select An Item</option>
  </select>
  <input id="btn" type="submit" name="add" value="Add">
</form>
<ul id="list">

</ul>

JavaScript-将所选选项添加到列表中

1 个答案: