jQuery Concatenate format(string and conditional statement)

Question

what I am trying to do is append a <select> tag and do an if statement.

I do have error. I think it's the way I am concatenating the string..

here's my code:

var load_volumes = jQuery('.micronic').val();
var arr_volumes = load_volumes.split(',');

var count_volumes = arr_volumes.length;
for(x=0; x<count_volumes; x++){

    jQuery('.append_here').append("<select class='volumes'>"
                                    +"<option>Choose Volume</option>"
                                    +"<option"
                                    + if(arr_volumes[x] == 0.5){
                                    + "selected"    
                                    + }
                                    +">0.5</option>"
                                    +"<option>0.75</option>"
                                    +"<option>1.10</option>"
                                    +"<option>1.40</option>"
                                    +"<option>2.0</option>"
                                    +"<option>2.5</option>"
                                    +"<option>3.0</option>"
                                    +"<option>4.0</option>"
                                    +"<option>6.0</option>"
                                    +"<option>7.5</option></select> &nbsp");
}

thanks in advance.

here's the error Uncaught SyntaxError: Unexpected token if @PraveenKumar — Sam Teng Wong
– Sam Teng Wong, Commented Jun 29, 2015 at 11:36
You'd do well to add that crucial information to the question itself. — Mitya
– Mitya, Commented Jun 29, 2015 at 11:36
You can't have an if statement in the middle of a string like that — adeneo
– adeneo, Commented Jun 29, 2015 at 11:36

Maurice Perry · Accepted Answer · 2015-06-29 11:37:05Z

See my answer below. You should consider using a template engine such as handlebars though.

jQuery('.append_here').append("<select class='volumes'>"
                                +"<option>Choose Volume</option>"
                                +"<option"
                                + (arr_volumes[x] == 0.5? " selected" : "")
                                +">0.5</option>"
                                +"<option>0.75</option>"
                                +"<option>1.10</option>"
                                +"<option>1.40</option>"
                                +"<option>2.0</option>"
                                +"<option>2.5</option>"
                                +"<option>3.0</option>"
                                +"<option>4.0</option>"
                                +"<option>6.0</option>"
                                +"<option>7.5</option></select> &nbsp");

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-29 11:38:34Z

1

Replace the line with if with ternary selector:

+ (arr_volumes[x] == 0.5? " selected" : "")

answered Jun 29, 2015 at 11:38

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Comments

Dropout · Accepted Answer · 2015-06-29 11:46:48Z

The append function should have a single element as an input, but this would produce only warnings. The problem in your code is

+ if(arr_volumes[x] == 0.5){
+ "selected"    
+ }

Ideally set this value in advance. Your code could look something like this:

var volumes = (arr_volumes[x] == 0.5) ? " selected" : ""; 
var select = "<select class='volumes'>"
                            +"<option>Choose Volume</option>"
                            +"<option"
                            + volumes
                            +">0.5</option>"
                            +"<option>0.75</option>"
                            +"<option>1.10</option>"
                            +"<option>1.40</option>"
                            +"<option>2.0</option>"
                            +"<option>2.5</option>"
                            +"<option>3.0</option>"
                            +"<option>4.0</option>"
                            +"<option>6.0</option>"
                            +"<option>7.5</option></select> &nbsp";
jQuery('.append_here').append(select);

But consider something like this in the end to make it variable:

var values = [0.5, 0.75, 1.10, 1.40, 2.0, 2.5, 3.0, 4.0, 6.0, 7.5];
var content = "<select class='volumes'>"
for(var i=0; values.length; i++) {
    content += "<option";
    content += (arr_volumes[x] == values[i]) ? " selected" : "";
    content += ">" + values[i] + "</option>";
}
content += "</select>";

Mukesh Kalgude · Accepted Answer · 2015-06-29 11:45:05Z

Try this way to select

var s="";
if(arr_volumes[x] == 0.5){
         s=" selected "  ;
}

jQuery('.append_here').append("<select class='volumes'>"
                                    +"<option>Choose Volume</option>"
                                    +"<option"
                                    + s 
                                    +">0.5</option>"
                                    +"<option>0.75</option>"
                                    +"<option>1.10</option>"
                                    +"<option>1.40</option>"
                                    +"<option>2.0</option>"
                                    +"<option>2.5</option>"
                                    +"<option>3.0</option>"
                                    +"<option>4.0</option>"
                                    +"<option>6.0</option>"
                                    +"<option>7.5</option></select> &nbsp");

There is no space after option so string will be optionselected.

Collectives™ on Stack Overflow

jQuery Concatenate format(string and conditional statement)

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Related