Question

我有这些输入字段，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>

我想要显示另一个下拉列表，其中的字段取决于用户选择的内容。有人能指出我正确的方向吗？

由于

Answer 1

您希望了解如何使用JavaScript操作HTML DOM。为了帮助您入门，here是一个示例库，可以轻松地执行您想要的操作。只需包含脚本并按照示例进行操作。

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

Answer 2

这称为级联或依赖下拉列表。有many examples如何自行完成此操作或使用jQuery等javascript库。

Answer 3

将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无关地递增。对不起，急于做这个并且脑部抽筋。

Answer 4

onChange（）函数可能就是你要找的东西。这家伙有一个问题： Is there an onSelect event or equivalent for HTML <select>?

Answer 5

这主要取决于您希望如何获取第二个下拉列表中的数据。

首先，您必须创建一个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调用，只加载孩子吗？

有时这些被称为“级联”下拉列表。某些样本的链接已在此处的其他答案中发布。

Answer 6

尝试这样的事情

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

更改输入字段Html / JavaScript？

6 个答案: