gpt4 book ai didi

javascript - 动态下拉列表(选择框)

转载 作者:行者123 更新时间:2023-11-28 21:22:12 27 4
gpt4 key购买 nike

这就是问题所在。

我有一个选择下拉列表。

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

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

因此,如果用户单击“待售”:则另一个选择下拉列表将加载价目表,如下所示:

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

我需要此代码作为客户端,不需要服务器端。只是想知道最干净的方法是什么。

干杯。

最佳答案

首先,我建议在选项元素中设置 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

关于javascript - 动态下拉列表(选择框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6039061/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com