更改输入字段 Html / JavaScript？答案

【问题标题】：Changing Input Fields Html / JavaScript?更改输入字段 Html / JavaScript？
【发布时间】：2011-05-01 13:21:26
【问题描述】：

我有这些输入字段，还有 1 个输入文本框，然后我有一个下拉菜单。现在我想要的是当用户从下拉列表中选择一个选项时（这是下拉列表）

    <select name="searchType">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>

我希望显示另一个下拉列表，其中包含取决于用户选择的字段。谁能指出我正确的方向？

谢谢

【问题讨论】：

标签： javascript html drop-down-menu

【解决方案1】：

将 onchange 监听器添加到您的标记中：

<select name="searchType" onchange="showFields(this)">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>

试试

function showFields(select) {
  var field = select.options[select.selectedIndex].value;
  switch (field) {
    case "all":
      // show all fields
      break;
    case "music":
      // show music field
      break;
    // ... more cases
    default:
       // default handler
  }
}

在这个 switch 语句中你真正想要做的是调用另一个函数来显示或隐藏另一个下拉列表中的选项。您知道如何设置选择元素和/或显示/隐藏页面元素的选项，对吧？

编辑以显示设置选项：

好的，假设你有这种形式的数据：

var data = [
    {type:"music",link:"http://www.domain.com/music/",file:"music1.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music2.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music3.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music4.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music5.mp3"}
  , {type:"music",link:"http://www.domain.com/music/",file:"music6.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie1.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie2.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie3.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie4.mp3"}
  , {type:"movie",link:"http://www.domain.com/movie/",file:"movie5.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv1.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv2.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv3.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv4.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv5.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv1.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv2.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv3.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv4.mp3"}
  , {type:"tv",link:"http://www.domain.com/tv/",file:"tv5.mp3"}
  ];

可能还不止这些，但这对于我们的目的来说已经足够了。现在，当您的 onchange 处理程序 showFields() 运行时，字段变量的计算结果为“音乐”，其中的代码可能类似于：

  // ...
  case "music":
    var targetSelect = document.getElementById('otherSelect');
    targetSelect.options.length = 0; // clear it if it already has values
    for (var i=0,imax=data.length; i<imax; i++) {
      if (data[i].type == "music") {
        var opt = document.createElement('option');
        // construct link to run when this option is selected
        opt.value = data[i].link + data[i].file;
        // using the file name w/o extension for simplicity
        opt.label = data[i].file.split('.')[0];

        // bad line of code! not enough coffee!
        // targetSelect.options[i] = opt;

        // Ahh, that's better.
        targetSelect.options.push(opt);
      }
    }
    break;
    // ...

这是简化的，当然不是所有文件都是 mp3 等，但应该足以让您入门。

进一步编辑：

其实上面有一个错误。您不应该在最后一行使用i 的值。如果你这样做，它将创建一个与数据数组长度相同的稀疏数组，只有大部分值是空的。您可以使用targetSelect.options.push(opt) 或创建一个单独的计数器并独立于i 递增它。抱歉，正着急做这件事，脑抽筋了。

【讨论】：

你能刷新我的记忆吗：D

【解决方案2】：

试试这样的

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
</head>
<body>
<input id="foo" value="hiya"/>
   <select name="searchType" onChange="fillInput(this)">
  <option value="all">All</option>
  <option value="music">Music</option>
  <option value="movie">Movies</option>
  <option value="tvShow">Tv Shows</option>
  <option value="musicVideo">Music Videos</option>
  <option value="audiobook">Audio Books</option>
  <option value="shortFilm">Short Films</option>
  <option value="podcast">Podcasts</option>
</select>


<script>
function fillInput(sender) {
  var foo = document.getElementById('foo');
  foo.value = sender.options[sender.options.selectedIndex].value; 

}
</script>
</body>
</html>

【讨论】：

【解决方案3】：

这主要取决于您要如何获取第二个下拉菜单的数据。

首先，您必须创建一个 javascript 函数来处理 onchange 事件：

<script>
function change(theList)
{
    /* this is where the magic happens:
       1. get the selected option value
       2. load and display the child
     */
}
</script>

select name="searchType" onchange="change(this);">

“魔法”取决于您将如何获取和显示子下拉菜单：

是否已隐藏所有十个可能的“子”下拉菜单，并显示您想要的？
重新加载页面，将选择作为参数？
执行 Ajax 调用，只加载子项？

有时这些被称为“级联”下拉菜单。一些示例的链接已在此处的其他答案中发布。

【讨论】：

【解决方案4】：

这称为级联或依赖下拉菜单。有many examples 告诉你如何自己完成这项工作或使用像jQuery 这样的javascript 库。

【讨论】：

【解决方案5】：

onChange() 函数可能正是您要寻找的。这个人有一个问题： Is there an onSelect event or equivalent for HTML <select>?

【讨论】：

【解决方案6】：

您想研究使用 JavaScript 操作 HTML DOM。为了帮助您入门，here 是一个示例库，可让您轻松地做您想做的事。只需包含脚本并按照示例进行操作即可。

最终，您可能想研究一下 jquery，它真是太棒了。一个这样的例子是使用 PHP 的here。你也可以看看这个jquery plugin

【讨论】：