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 */ );
});

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

2 个答案: