Добавление параметров на основе значения вводимого текста

#javascript #jquery #html #forms

#javascript #jquery #HTML #формы

Вопрос:

Как я могу добавить параметры в поле выбора на основе значения введенного текста?

Это мой вводимый текст:

 <input type="text" id="amount" size="30" />

Это мой элемент, который я хочу добавить в:

 <span id="span_combo">
     <select name="foo" id="combo">
           <option value="1">1</option>  
           <option value="2">2</option>
     </select>
</span>

Это мой текущий JS:

 $("#amount").keyup(function(){
        var flag;
        $("#combo").show("slow");
        var a = $("#amount").val();
        if(a==""){
            $("#span_combo select").remove(true);
        }
        var i;
        for(i=1;i<=a-1;i  ){
                $("#span_combo").append($("#span_combo select").first().clone(true));
        }
    });

1. вы пытаетесь добавить дополнительные параметры в поле выбора? или обновить другой элемент в документе?

2. Моя ошибка … забыл о вашем ложном поле ввода вверху. сможете ли вы перестраивать весь массив параметров с 0 при каждом обновлении поля ввода, если вы ограничены добавлением к исходному массиву?

3. Я хочу обновить другой элемент в документе, а не добавлять дополнительные параметры в поле выбора

Ответ №1:

Что-то вроде этого должно это сделать

Демонстрация в реальном времени здесь:http://jsfiddle.net/NdpuM/1 /

 $("#amount").keyup(function(){
    var $combo = $('#combo');
    $combo.html('');
    var value = parseInt($('#amount').val(), 10);
    for (i = 1; i <= value; i  ) {
        var $option = $('<option>').val(i).html(i);
        $combo.append($option);
    }
});

В принципе, снимайте флажок выбора при каждом нажатии клавиши и повторно заполняйте его. Вы могли бы оптимизировать это больше, добавив несколько проверок, чтобы увидеть, совпадает ли это значение

Ответ №2:

Если вы хотите перестроить весь массив:

 $("#amount").keyup(function(){
        $("#combo").show("slow");
        var a = $("#amount").val();
        if(a==""){
            $("#span_combo select").remove(true);
        }


        $('#combo').empty();
        for(var i=1;i<=a-1;i  ){
            $('<option />').attr('value', i)
                           .text(i)
                           .appendTo($('#combo'));
        }
    });

Ответ №3:

Я думаю, это могло бы сработать:

 $("#amount").keyup(function() {
        var current = $("#combo option").length;
        if(current < $(this).val()) {
            for(var i = current   1;i<=$(this).val();i  ) {
                $("#combo").append('<option value="' i '">' i '</option>');
            }
        } else {
            for(var i=(parseInt($(this).val(),10) 1);i<=current;i  ) {
                $('#combo option[value="' i '"]').remove();
            }
        }
    });

Возможно, вы захотите добавить проверку ввода к этой функции, но она делает то, что вы хотите, если вы используете ее правильно.

РЕДАКТИРОВАТЬ: Просто для пояснения, этот код не очищает все поле выбора при каждом событии ввода, он просто добавляет новые параметры или удаляет последние, чтобы получить указанное количество значений.