通過單選按鈕更改字段集

Question

我有一個帶有2個單選按鈕的表單，當切換任何一個按鈕時，它都會顯示或隱藏某個字段集。 我遇到的問題是因為該字段集只是隱藏的，所以在提交表單時，它仍會采用第一個字段集值。

我設置了一個小提琴，以顯示表單如何更改字段集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");

});

我的問題是，如果選擇了標度B，如何完全禁用第一個字段集；同樣，當選擇標度A時，它將禁用第二個字段集嗎？

非常感謝

Answer 1

提交表單時，在同一表單中不能有兩個具有相同名稱的輸入，選擇或文本區域。 這樣做會引起混亂，並可能最終導致提交錯誤的信息。 有兩種方法可以解決此問題。

方法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以顯示表單而不是字段集即可。

Answer 2

現在將單選按鈕更改為選項卡式設計，以便可以正確分隔表單。 如果有人想知道這些標簽的制作方法，請訪問http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery

Answer 3

方法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>...";
}

另一種干凈的解決方案是使用循環動態創建秤。