Question

我希望有一个表单下拉列表，列出特定类型项目的所有品牌。从该列表中选择一个品牌后，将出现一个新的下拉列表，其中列出了所选品牌的所有不同型号。

如何根据使用JavaScript选择的品牌来显示特定的下拉列表。我的JSFiddle链接中的代码非常简单，我只是为了给它一些视觉效果。

<select>
    <option>Select Make
    <option>Toyota 
    <option>Honda
    <option>Ford
</select>

Answer 1

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script>

$( document ).ready(function() {
$('#SelectBox').change(function() {
    if (this.selectedIndex == 1)
    {
        $( "#Example").empty();
        $( "#Example").append('<option>Corolla<option><option>Camry<option><option>Prius<option>');
    }
    else if (this.selectedIndex == 2)
    {
        $( "#Example").empty();
        $( "#Example").append('<option>Accord<option><option>Civic<option><option>Odyssey<option>');
    }
    else if (this.selectedIndex == 3)
    {
        $( "#Example").empty();
        $( "#Example").append('<option>Focus<option><option>Explorer<option><option>Taurus<option>');
    }

});
});
</script>

</head>
<body>
<form id="myForm">

Make:<br />
<select id="SelectBox">
    <option>Select Make</option>
    <option id='Toyota' onclick='showMe()' >Toyota</option>
    <option id='Honda'>Honda</option>
    <option id='Ford'>Ford</option>
</select><br />

Model:<br />
<select id="Example">
    <option>example
</select>
</form>

</body>
</html>

Answer 2

我的方法：http://jsfiddle.net/PjFMh/2/

要更新内容，您需要一个侦听器，以了解make选择器将发生的更改。首先，您需要抓住可以设置侦听器的选择器本身（var $make = document.getElementById('make')）。这是由$make.onchange = function() { ... }完成的。在此函数内部，获取当前所选索引的索引，以便确定要显示的模型数组。

首先，清除模型选择器的内容，以便您可以使用新内容填充它。对于每个模型，创建一个新的<option>并使用当前模型填充它。然后，将其附加到选择器本身。

存储数据的位置有不同的方法（对于make和model），但我选择将其作为数组存储在JavaScript中。您可以拥有可以隐藏/显示代码的HTML元素，但是如果您稍后要更改某些内容，我认为这更加模块化。

Answer 3

首先，您需要修复HTML，<option>必须有一个结束标记。

许多方法之一是http://jsfiddle.net/Tt5gf/1/，我给你写了一些评论，尝试使用它 - 添加或删除一些选项，更改现有选项，进行一些练习

Answer 4

一种非常简单的方法是在文本文件中包含所有第二个选项，并将它们作为第一个选择器上的单击或更改事件加载。像这样：

$("#firstSelector").click(function() {
  x = this.value;
   $("#secondSelector").load("[path to text file]/' + x + '.txt");
});

因此，您为每个文本文件指定第一个选择器中每个选项的值的名称，每个文本文件的内容是要在第二个选择器中加载的选项的html。要在第二个选择器中添加/更改选项，只需替换相应的文本文件。

改变表单元素

4 个答案: