Динамическое изменение нескольких скрытых полей формы

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