Числовой выпадающий список, который «превращается в» текстовое поле, когда я выбираю «Еще»

Question

Мне нужно сделать выпадающий список с номерами от 0 до 10, плюс опцию «--Более--» внизу. Если пользователь выбирает «--More--», тогда я хочу, чтобы раскрывающийся список «превратился в» текстовое поле, чтобы он мог вводить числовое значение.

Я хочу, чтобы отправленное имя поля имело одинаковое значение формы независимо от того, какой метод ввода использовался. Желательно, чтобы он ухудшался, если у пользователя нет javascript - либо не показывая опцию «Больше», либо просто используя текстовое поле.

Я использую ASP.NET MVC - другими словами, решение, которое я ищу, не должно работать с какой-то специальной серверной технологией. Хотя я уже использую jQuery.

Answer 1

Попробуйте это:

HTML:

<input class="numberEntry" name="howMany" type="text" /> 

JQuery:

$(document).ready(function() {

    // get the name from the existing text entry input
    var numberEntryName = $(".numberEntry").attr("name");

    // create some new HTML to replace our input with
    var numberSelector = '';

    // make the select box
    numberSelector += '<select name="' + numberEntryName + '">';
    for (var i = 0; i <= 10; i++)
    {
        numberSelector += '<option value="' + i + '">' + i + '</option>';
    }
    // add the more link
    numberSelector += '<option value="MORE">- More -</option>';

    numberSelector += '</select>';

    // now grab the existing input field so we can display it later when
    // the user clicks on the more link
    var numberEntryHtml = $(".numberEntry").wrap("<div>").html();

    // replace the existing input field with our new HTML
    $(".numberEntry").replaceWith(numberSelector);

    // add a click event to the more link so that we'll show our
    // old text input field when "more" is clicked
    $("select[name=" + numberEntryName + "]").bind("change", function(e) {
        if ($(this).val() == "MORE")
            $(this).replaceWith(numberEntryHtml);
    });


});

Этот код не проверен, но он должен дать вам представление о шаблоне проектирования.