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


});

此代码未经测试，但它应该让您了解设计模式。

当我选择“更多”时，“变成”文本框的数字下拉列表

1 个答案: