动态更改多个隐藏表单域

Question

我对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=''>

我认为每个选项的价值都可以改变，我不确定最好的方法是什么。

Answer 1

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

$("#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);
});

Answer 2

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