动态下拉列表(选择框)

时间:2011-05-18 01:53:34

标签: javascript forms

这是问题所在。

我有一个选择下拉列表。

   <select name="listingtype" id="speedD" style="width:210px;">
      <option>For Sale</option>
      <option>For Rent</option>
   </select>

另一个选择下拉列表,其中显示价格,在页面加载时它是空的..

因此,如果用户点击For Sale:那么另一个选择下拉列表,加载价格表如下:

   <select name="valueA" id="speedF" style="width:200px;">
     <option value="Any" selected="selected">Any</option>
     <option value="50000">$50,000</option>
     <option value="100000">$100,000</option>
     <option value="150000">$150,000</option>
     <option value="200000">$200,000</option>
     <option value="250000">$250,000</option>

如果他们选择For Rent。选择下拉传播如下:

<select name="valueA" id="speedF" style="width:200px;">
    <option value="Any" selected="selected">Any</option>
    <option value="100">$100</option>
    <option value="150">$150</option>
    <option value="200">$200</option>
    <option value="250">$250</option>
    <option value="300">$300</option>
</select>

我需要这个代码是客户端,不需要服务器端。而且只是想知道最干净的方法是什么。

干杯。

2 个答案:

答案 0 :(得分:2)

首先,我建议在选项元素中设置value属性。 例如:

<option value="sale">For sale</option>
<option value="rent">For rent</option>

如果您还没有听说过或看过称为jQuery的JavaScript库,我强烈建议您查看它!使用最少的JavaScript创建这样的动态网站时非常有用。

我会做以下事情:

<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
    if (document.yourformname.listingtype.value == "sale") {
        //it is for sale
        $('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
    } else {
        //fill it with the other elements
    }
</script>
</body>
</html>

现在您可以使用JSON或XML更加动态地加载它,但这取决于您。我真的建议你看看图书馆: http://jQuery.com

答案 1 :(得分:1)

当用户在For Sale / For Rent选择中选择一个选项(onchangeonselect,忘记哪个选项)时,使用JavaScript填充带有选项的空选项。

编辑:更具体地说,当页面加载时,第二个框为空。将选项存储在数组中。使用循环根据每个数组项创建新的OPTION元素。