當我選擇'更多'時，'變成'文本框的數字下拉

Question

我需要創建一個下拉列表，其中包含數字0到10，以及底部的「--More--」選項。如果用戶選擇'--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); 
    }); 


}); 

此代碼是未經測試，但它應該給你的設計模式的想法。