Передать входное значение для выбора выпадающего списка

0

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

В форме отправки у меня есть раскрывающийся список вариантов как 12 месяцев, 36 месяцев или другой (см. Ниже коды). Когда пользователь нажимает "Другое", я попытаюсь отобразить окно ввода, где пользователю нужно ввести число месяцев вручную (не выясните, как скрыть/показать текстовое поле, но я буду)

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>
Enter Month Number:
<input type="text" name="SupportRenewMonthManual" id="SupportRenewMonthManual">

Проблема в том, что мне нужно убрать либо поле выбора "SupportRenewMonth", либо текстовое поле "SupportRenewMonthManual". Есть ли способ сообщить форме передать значение из окна SupportRenewMonthManual в SupportRenewMonth, а затем отправить форму. Таким образом, мне не нужно изменять свой код ASP, чтобы попытаться захватить оба, а затем разобраться, какое значение хранить в базе данных.

  • 0
    Да, есть способ. При отправке, получить значение из выбора и установить его в качестве значения ввода
Теги:

3 ответа

1
Лучший ответ

Я считаю, что что-то вроде этого должно работать как для обновления ваших значений, так и для скрытия поля.

HTML

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>
<label labelfor="SupportRenewMonthManual" id="SupportRenewMonthManualLabel">Enter Month Number: </label>
<input type="text" name="SupportRenewMonthManual" id="SupportRenewMonthManual">

JS

$(document).ready(function() {
    $('#SupportRenewMonthManualLabel').hide();
    $('#SupportRenewMonthManual').hide();
    $('#SupportRenewMonthManual').val($('#SupportRenewMonth').val());
    $('#SupportRenewMonth').change(function() {
        var selectedItem = $("select option:selected").val();
        if (selectedItem !== 'Other') {
            $('#SupportRenewMonthManualLabel').hide();
            $('#SupportRenewMonthManual').hide();
            $('#SupportRenewMonthManual').val($('#SupportRenewMonth').val());
        }
        else
        {
            $('#SupportRenewMonthManualLabel').show();
            $('#SupportRenewMonthManual').val('');
            $('#SupportRenewMonthManual').show();
        }
    });
});

Как всегда, не забудьте проголосовать за любые ответы StackOverflow, которые вы найдете полезными.

Поделиться
  • 0
    jsFiddle: jsfiddle.net/eat_sleep_code/GNt5F
  • 0
    Привет @ eat-Sleep-Code, Спасибо, что ответил с примерами кодов. Я следовал вашим кодам, и похоже, что «SupportRenewMonthManual» получает значение копии при изменении поля выбора. Так что, если я выберу 24 36 месяцев, это работает. Однако, если отправить форму со значением по умолчанию (12 месяцев), без изменения значения селектора, значение не будет скопировано в поле ввода «SupportRenewMonthManual». Пожалуйста помоги.
Показать ещё 2 комментария
1

Я думаю, что это должно сработать. Убедитесь, что следующий код находится в готовом документе или загружается в окно

$("form").submit(function(){
    var v = $('#SupportRenewMonth').val();
    if( v!== 'Other') {
        $('#SupportRenewMonthManual').val( v );
    }
});

Для окна ввода скрывать/показывать

$('#SupportRenewMonth').on('change', function() {
    if($(this).val() == 'Other') {
        $('#SupportRenewMonthManual').show();
    } else {
        $('#SupportRenewMonthManual').hide();
    }
}).change();

http://jsfiddle.net/pCDm6/

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

Поделиться
  • 0
    Спасибо за отзыв. Ваше предложение не будет работать, когда пользователь выберет «Другое» в поле выбора. Поскольку значение «Другое» также будет скопировано в поле ввода «SupportRenewMonthManual».
  • 0
    @Milacay ваш вопрос не упоминает об исключении других полей, поэтому мой код не включает его. Я обновил ответ, включив исключение поля Другое.
0

Просто удалите name из ввода, поэтому оно не будет отправлено на сервер и обработает изменение в jQuery чтобы установить правильное значение в раскрывающемся списке.

например.

<select name="SupportRenewMonth" id="SupportRenewMonth">
    <option value="12">12 Month</option>
    <option value="36">36 Month</option>
    <option value="Other">Other</option>
</select>Enter Month Number:
<input type="text" id="SupportRenewMonthManual">

JS

$('#SupportRenewMonthManual').on('keyup', function (e) {
    var month = $(this).val();
    $('#SupportRenewMonth option[value="' + month + '"]').prop('selected', true);
});

DEMO

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню