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

Community · Accepted Answer · 2017-05-23 10:31:45Z

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.

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Nov 28, 2013 at 6:38

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sushil bharwani · Accepted Answer · 2013-11-28 06:36:11Z

0

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

answered Nov 28, 2013 at 6:36

sushil bharwani

30.2k30 gold badges98 silver badges130 bronze badges

1 Comment

Prem Over a year ago

no its not working. I have appended in newtextBoxDiv div as newTextBoxDiv.append(searchInput).append(" ").append(s).append(hidd); just added <select> tag without options in it

Rob M. · Accepted Answer · 2013-11-28 06:43:58Z

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

Yeah thanks. I understand this. But even if I create var selectinput = <select> and var optioninput = '<option>', how could I wrap option into select.

Collectives™ on Stack Overflow

create select and option input via jquery

3 Answers 3

Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Linked

Related