通過單選按鈕更改字段集

我有一個帶有2個單選按鈕的窗體，當任一按鈕被切換時，它將顯示或隱藏某個字段集。我遇到的問題是因爲fieldset只是被隱藏，所以當表單被提交時它仍然需要第一個fieldsets的值。通過單選按鈕更改字段集

我已經建立了小提琴展現形式如何改變字段集http://jsfiddle.net/hhdMq/1/

所以，當我選擇「縮放B」，雖然你可以改變正確的價值觀，當表單提交它需要規模的默認值A.

<center> 
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" /> 
<label for="rdYes">Scale A</label> 
<input type="radio" name="sellorlet" value="No" id="rdNo" /> 
<label for="rdNo">Scale B</label> 
</center> 
<fieldset id="sell"> 
<center> 
    <select id="pricemin" name="min"> 
     <option value="50000">Min Price</option> 
     <option value="50000">£50,000</option> 
     <option value="100000">£100,000</option> 
     <option value="200000">£200,000</option> 
     <option value="300000">£300,000</option> 
     <option value="400000">£400,000</option> 
     <option value="500000">£500,000</option> 
     <option value="600000">£600,000</option> 
     <option value="700000">£700,000</option> 
     <option value="800000">£800,000</option> 
     <option value="900000">£900,000</option> 
     <option value="1000000">£1,000,000</option> 
     <option value="1250000">£1,250,000</option> 
     <option value="1500000">£1,500,000</option> 
     <option value="1750000">£1,750,000</option> 
     <option value="2000000">£2,000,000</option> 
     <option value="3000000">£3,000,000</option> 
    </select> 
    <select id="pricemax" name="max"> 
     <option value="5000000">Max Price</option> 
     <option value="100000">£100,000</option> 
     <option value="200000">£200,000</option> 
     <option value="300000">£300,000</option> 
     <option value="400000">£400,000</option> 
     <option value="500000">£500,000</option> 
     <option value="600000">£600,000</option> 
     <option value="700000">£700,000</option> 
     <option value="800000">£800,000</option> 
     <option value="900000">£900,000</option> 
     <option value="1000000">£1,000,000</option> 
     <option value="1250000">£1,250,000</option> 
     <option value="1500000">£1,500,000</option> 
     <option value="1750000">£1,750,000</option> 
     <option value="2000000">£2,000,000</option> 
     <option value="3000000">£3,000,000</option> 
     <option value="4000000">£4,000,000</option> 
     <option value="5000000">£5,000,000</option> 
    </select> 
</center> 
</fieldset> 
<fieldset id="buy" style="display:none;"> 
<center> 
    <select id="lpricemin" name="min"> 
     <option value="500">Min Price</option> 
     <option value="500">£500</option> 
     <option value="600">£600</option> 
     <option value="700">£700</option> 
     <option value="800">£800</option> 
     <option value="900">£900</option> 
     <option value="1000">£1000</option> 
     <option value="1150">£1150</option> 
     <option value="1250">£1250</option> 
     <option value="1500">£1500</option> 
     <option value="2000">£2000</option> 
     <option value="2500">£2500</option> 
     <option value="3000">£3000</option> 
     <option value="4000">£4000</option> 
     <option value="5000">£5000</option> 
    </select> 
    <select id="lpricemax" name="max"> 
     <option value="5000">Max Price</option> 
     <option value="600">£600</option> 
     <option value="700">£700</option> 
     <option value="800">£800</option> 
     <option value="900">£900</option> 
     <option value="1000">£1000</option> 
     <option value="1150">£1150</option> 
     <option value="1250">£1250</option> 
     <option value="1500">£1500</option> 
     <option value="2000">£2000</option> 
     <option value="2500">£2500</option> 
     <option value="3000">£3000</option> 
     <option value="4000">£4000</option> 
     <option value="5000">£5000</option> 
    </select> 
</center> 
</fieldset>

和使用jQuery的：

$("input[name='sellorlet']").change(function() { 
$("#sell").toggle(this.value == "Yes"); 
$("#let").toggle(this.value == "No"); 

});

我的問題是，我怎麼能完全禁用第一個字段集若S日曆B被選中，同樣當選擇比例A時，它將禁用第二個字段集？

非常感謝

來源

2013-12-19 user1857612

，因爲你有兩組元素具有相同的名稱。將隱藏的字段集中的輸入名稱重命名爲簡單的hack –

您應該將字段集移動到您的窗體 – Samy

之外，如http：// jsfiddle。net/arunpjohny/p5Rh6/3/ –

當提交表單，你不能有兩個輸入，查詢，或者在同一形式的同名文字區域。這樣做會造成混淆，並可能導致提交錯誤的信息。有兩種方法可以解決這個問題。

方法1：

更改

<select id="lpricemin" name="min">

<select id="lpricemin" name="lmin">

到

<select id="lpricemax" name="max">

分別爲

<select id="lpricemax" name="lmax">。

這將允許您處理來自lmin和lmax的數據，並確保您從第二個字段集中獲取信息。

方法2：

把第二字段集以不同的形式。然後，只需更改jQuery以顯示錶單而不是字段集。

來源

2013-12-19 15:55:14 zsaat14

是的，我們可以做到這一點，但不幸的是，如果我們要更改定價的名稱，該網站將需要重大修改。我會看看改變形式，看看有什麼。 – user1857612

@ user1857612我不知道你是設計網站還是隻是維護網站，但爲了將來的參考，在同一頁面中使用相同的名稱值被認爲是不好的做法，類似於使用相同的ID。 – zsaat14

是的，這只是暫時的事情。我個人不喜歡這種方式，但現在我已經標出了表單來擺脫單選按鈕，因此整個事件以兩種不同的形式運行。更好地工作:-) – user1857612

現在將單選按鈕更改爲選項卡式設計，以便可以正確分隔窗體。如果有人想知道標籤是如何完成的，他們在這裏http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

來源

2013-12-19 22:12:40 user1857612

方法3將通過JavaScript更改切換選擇內容，而不是通過可見性切換。你可以這樣做：

function setMaxScale() 
{ 
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\ 
    <option value="50000">£50,000</option>\ 
    <option value="100000">£100,000</option>\ 
    <option value="200000">£200,000</option>\ 
    <option value="300000">£300,000</option>..."; 
}

另一個乾淨的解決方案是用循環動態地創建你的秤。

來源

2013-12-19 22:20:28

通過單選按鈕更改字段集

回答

相關問題