2011-05-18 103 views
0

這是問題所在。動態下拉列表(選擇框)

我有一個選擇下拉列表。

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

我需要此代碼作爲客戶端,不需要服務器端。只是想知道乾淨的方法是乾淨的。

乾杯。

+2

我們會幫助解決問題,但不是爲您編寫代碼。 – Blender 2011-05-18 01:57:15

+0

出於某種原因,我在問題中發佈的鏈接不包含在內。但是,感謝您的寶貴意見。將修正這個問題 – 422 2011-05-18 02:04:36

+0

你可以選擇jQuery這個實例嗎? – 2011-05-18 02:12:49

回答

1

當用戶在For Sale/For Rent選項中選擇一個選項(onchangeonselect,忘記哪個)時,使用JavaScript填充空白選項。

編輯:更具體地說,當頁面加載時讓第二個框爲空。將選項存儲在數組中。使用循環根據每個數組項目創建新的OPTION元素。

+0

謝謝大衛,正是我想的陣列。謝謝 – 422 2011-05-18 02:07:22

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

+0

啊,好吧這是一個很酷的想法。將有一個發揮與此感謝 – 422 2011-05-18 02:13:59

+0

也是另一個很好的資源,使您的頁面看起來很漂亮,使您的表單元素看起來不錯,你可以去www.jqueryui.com,這將是有用的,一旦你得到了jQuery的手 – kstev 2011-05-18 02:16:33

+0

我們的形式更漂亮比速度上的多莉部分);實際上元素使用jQuery UI。 – 422 2011-05-18 02:22:25