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

提交表单时，您不能在同一表单中使用两个具有相同名称的输入，选择或textareas。这样做会导致混淆，并可能导致提交的错误信息。有两种方法可以解决这个问题。

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

另一个干净的解决方案是使用循环动态创建比例。

通过单选按钮更改字段集

3 个答案: