create select and option input via jquery

Question

Is there any way to create select input like we can do for text input in jquery code below. Below code doesnt work for Select. Any help will be highly appreciated.

   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

Try this

Create select element

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

Now append options in it

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

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

newTextBoxDiv.append(ddl);

You can find more details - Read More.

Answer 2

There is no such thing as <input type="select" />, what you are looking for is the select tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

In jQuery this would be created with $('<select />') and then you could add options to it. To clarify the process of adding options to the select, there are many approaches you could take. If you are going to be doing this repeatedly, I would create a factory function that returns a list of options like this:

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

try this

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


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

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

s.appendTo('body');