通過jQuery創建選擇和選項輸入

Question

有什么方法可以創建選擇輸入，就像我們在下面的jQuery代碼中為文本輸入所做的那樣。 以下代碼不適用於“選擇”。 任何幫助將不勝感激。

   counter = 1;
   var searchInput = $(' <input/>', {
     type: 'text',
     placeholder: 'Product Name',
     name: 'row['+counter+'][product_name]',
            class : 'txtvalue',
     id: 'project' + counter
 });

    var quarterInput = $(' <input/>', {
    type: 'select',
    value: ('1','2','3'),
    name: 'row['+counter+'][quarter]',
class : 'text', 
    id: 'project-quarter' + counter
});
var hidd = $('<input/>', {
    type: 'hidden',
    name: 'searchhid' + counter,
    id: 'project-id' + counter
});

newTextBoxDiv.append(searchInput).append("&nbsp;").append(quarterInput).append(hidd);
newTextBoxDiv.appendTo("#TextBoxesGroup");

Answer 1

嘗試這個

創建選擇元素

var ddl = $("<select id=\"ddlId\" name=\"ddlName\" />");

現在在其中附加選項

var data = {
    '1': '1',
    '2': '2',
    '3': '3', 
}

for(var val in data) {
    $("<option />", {value: val, text: data[val]});
}

newTextBoxDiv.append(ddl);

您可以找到更多詳細信息- 閱讀更多 。

Answer 2

沒有<input type="select" />這樣的東西，您正在尋找的是select標記： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/select

在jQuery中，可以使用$('<select />') ，然后可以向其中添加選項。 為了闡明向選項中添加選項的過程，您可以采用多種方法。 如果您要重復執行此操作，我將創建一個工廠函數，該函數將返回以下選項列表：

var generate_options = function(values){
    var options = [];
    if('splice' in values){
        for(var i = 0; i < values.length; i++){
            options.push($('<option>'+values[i]+'</option>').val(values[i]));
        }
    }
    return options;
}

$('<select />').append( generate_options([1,2,3,4]) );

Answer 3

嘗試這個

var data = {
    'foo': 'bar',
    'foo2': 'baz'
}


var s = $('<select />');

for(var val in data) {
    $('', {value: val, text: data[val]}).appendTo(s);
}

s.appendTo('body');