jquery/javascript: return and if sentence

Question

My jquery/javascript problem: I need to return the code of an html select input, but I also need to set the selected option dynamically.

function(data){
  return '<select class="form-control"'+
            '<option value="1"'+ if(data === 1){selected}+'>Name 1</option>'+
            '<option value="2"'+ if(data === 2){selected}+'>Name 2</option>'+
            '<option value="3">Name 3</option>'+
          '</select>';
}

Attention: using $(selector).val(data); AFTER the html is rendered is NOT an option (unfortunately)

Adam Merrifield · Accepted Answer · 2015-02-10 19:33:32Z

5

You can't put an if inside of a sting, but you could use a ternary operator.

function(data){
    return '<select class="form-control"'+
            '<option value="1"'+(data === 1 ? ' selected' : '')+'>Name 1</option>'+
            '<option value="2"'+(data === 2 ? ' selected' : '')+'>Name 2</option>'+
            '<option value="3">Name 3</option>'+
          '</select>';
}

answered Feb 10, 2015 at 19:33

Adam Merrifield

10.4k4 gold badges44 silver badges60 bronze badges

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

3 Comments

talemyn Over a year ago

You need to put selected in quotes (i.e., ' selected'), otherwise, it will try to interpret it as a variable.

Adam Merrifield Over a year ago

@talemyn ahh i was figuring it was a variable from outside the scope of the function, I'll change it.

Igor Carmagna Over a year ago

Very good. Thank you very much. I'll accept your answer. Tested and working great. I upvoted all 3 answers as they provided working alternatives

user229044 · Accepted Answer · 2015-02-10 19:31:52Z

2

if statements do not evaluate to a value. You cannot embed them inside an expression this way.

Your options are to use the ternary operator, or to build your string over several statements.

function(data){
  var str = '<select class="form-control"'+
            '<option value="1"';

  if(data === 1){str += "selected"}

  str += '>Name 1</option>'+
            '<option value="2"';

  if(data === 2){str += "selected"}

  str += '>Name 2</option>'+
            '<option value="3">Name 3</option>'+
          '</select>';
  return str;
}

answered Feb 10, 2015 at 19:31

user229044♦

241k41 gold badges347 silver badges350 bronze badges

Comments

Wilmer · Accepted Answer · 2015-02-10 19:52:06Z

1

You can do this with jQuery in a much cleaner fashion:

function(data){
     return   $('<select class="form-control"'+
                '<option value="1">Name 1</option>'+
                '<option value="2">Name 2</option>'+
                '<option value="3">Name 3</option>'+
              '</select>').val(data);
}

EDIT: After further testing i found that converting the jquery object to html doesn't preserve the selected attribute. Alternatively, the function can return the jquery object then .appendTo the element as is.

edited Feb 10, 2015 at 19:52

answered Feb 10, 2015 at 19:36

Wilmer

2,5091 gold badge14 silver badges8 bronze badges

2 Comments

Adam Merrifield Over a year ago

It should be noted this will return a jQuery object instead of a string.

Wilmer Over a year ago

yes, edited although returning the jquery object can be more useful.

Collectives™ on Stack Overflow

jquery/javascript: return and if sentence

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related