Javascript 动态更改多个隐藏表单字段

我对jQuery有些陌生。我很确定这是可能的，但我不确定如何编写代码

我想做的是使用一个下拉列表来选择代表范围的选项，例如，如果有人在搜索卧室，下拉列表选择看起来像0-2、3-5、6+。然后，当有人选择一个选项时，两个隐藏字段将被动态填充。一个字段具有最小范围，另一个字段具有最大范围

下面是一个我试图构建此结构的示例：

    <select id="bedrooms" class="dropdown">
      <option>Bedrooms</option>
      <option></option>
      <option value="1">0-2</option>
      <option value="2">3-5</option>
      <option value="3">6+</option>
    </select>

    <input type="hidden" name="bedrooms-from" value=''>
    <input type="hidden" name="bedrooms-to" value=''>

---

我想每个选项的值都可能会改变，我不确定最好的方法是什么

我还没有实际运行此功能，但我认为它应该可以工作：

$("select").on("change", function() {
    $("form").append( /* <input type='hidden'> tag here */ );
});

$("#bedrooms").change(function ()
{
    // Get a local reference to the JQuery-wrapped select and hidden field elements:
    var sel = $(this);
    var minValInput = $("input[name='bedrooms-from']");
    var maxValInput = $("input[name='bedrooms-to']");

    // Blank the values of the two hidden fields if appropriate:
    if (sel.val() == "") {
        minValInput.val("");
        maxValInput.val("");
        return; 
    }

    // Get the selected option:
    var opt = sel.children("[value='" + sel.val() + "']:first");

    // Get the text of the selected option and split it on anything other than 0-9:
    var values = opt.attr("text").split(/[^0-9]+/);

    // Set the values to bedroom-from and bedroom-to:
    minValInput.val(values[0]);
    maxValInput.val((values[1] != "") ? values[1] : 99999999);
});

---

这可能会导致多个值被传输到服务器-想象一下这个控件被多次更改。这可能是也可能不是所希望的。它也不会显示提取值的热度。[0,2]从0-2，[6，，]从6+良好呼叫。。。它需要一个数组来存储[select.id]=>hasBeenSet，然后执行一个.value，如果您希望6+的最大范围是什么？这与我的想法是一致的。好建议。我认为OP可以考虑在选项中使用比1,2,3更好的值，但是这有助于分裂吗？个人偏好当然，我只是更喜欢使用值而不是文本来处理这类事情。谢谢：是的，我认为在选项值中也有范围会更简单。