JavaScript: IIF like statement

Question

Coming from VB, JavaScript isn't very easy to get the hang of. Please don't be negative, I've tried and searched loads but with no luck. BTW, I'm creating a dropdown control initialized from a Select option list in JS.

Dummy code:

var col = 'tardis'; 
var x = '<option value="' + col + '">Very roomy</option>');

I would like to add selected after the value of col ONLY if col is equal to 'screwdriver'.

I've tried using the IF statement with the ? and the : but can't seem to get my head around it. Having '' as the false value does not work. No items are selected and the list is blank. Remove the IF statement and all works.

Any ideas and again, sorry for the newb-ness.

First thing you need to know by the way, is about accessing the browser console. Ctrl+Shift+J in chrome, or F12 in IE9+ or the firebug plugin in firefox. You can try code in the console, see your whole HTML page and select elements on it, and view logs from your app (use console.log(....anything you want ...) instead of alert() ). Javascript is a simple language with a very low concept count but a lot of gotchas to avoid. Check out my presentation: http://dl.dropbox.com/u/108084/all-of-javascript/example_scripts.html feel free to twitter/email me from my info on there with questions — George Mauer, Dec 24 '11 at 16:51

score 71 · Accepted Answer · answered Dec 24 '11 at 04:09

71

'<option value="' + col + '"'+ (col === "screwdriver" ? " selected " : "") +'>Very roomy</option>';

answered Dec 24 '11 at 04:09

George Mauer

117,483
131
382
612

Are you sure there are 3 = (===) signs? In some web resources I read you ought to put 2 = (==) only. Please clarify the matter. http://www.smipple.net/snippet/dsheardown/Javascript%20IIF%20example – Youstay Igo Jan 18 '16 at 17:18
4

@YoustayIgo in javascript `===` means "strict equality" whereas `==` means "equality with coercion". While in this case you would be hard pressed to find a value for `col` where it matters, in general you want to prefer the `===` version unless you specifically want coercion. For more thoughts on this see [Javascript the Good Parts](http://bdcampbell.net/javascript/book/javascript_the_good_parts.pdf) which is basically the bible for many javascript developers. (In that there's many disagreements and factions but most agree its generally the right idea) – George Mauer Jan 18 '16 at 20:43
Thx for the clarification :) – Youstay Igo Jan 21 '16 at 19:07

score 3 · Answer 2 · answered Dec 24 '11 at 04:01

3

var x = '<option value="' + col + '"'
if (col == 'screwdriver') x += ' selected';
x += '>Very roomy</option>';

answered Dec 24 '11 at 04:01

jspcal

50,847
7
72
76

Matt Ball · Answer 3 · 2011-12-24T04:15:36.050

3

Something like this:

for (/* stuff */)
{
    var x = '<option value="' + col + '" '
        + (col === 'screwdriver' ? 'selected' : '')
        + '>Very roomy</option>';
    // snip...
}

edited Dec 24 '11 at 04:15

answered Dec 24 '11 at 04:02

Matt Ball

354,903
100
647
710

score 2 · Answer 4 · answered Dec 24 '11 at 04:33

If your end goal is to add elements to your page, just manipulate the DOM directly. Don't use string concatenation to try to create HTML - what a pain! See how much more straightforward it is to just create your element, instead of the HTML that represents your element:

var x = document.createElement("option");
x.value = col;
x.text = "Very roomy";
x.selected = col == "screwdriver";

Then, later when you put the element in your page, instead of setting the innerHTML of the parent element, call appendChild():

mySelectElement.appendChild(x);

@RobG - Including the `selected` attribute in an ` – gilly3 Dec 24 '11 at 05:01 — gilly3, Dec 24 '11 at 05:01

score 0 · Answer 5 · answered Dec 24 '11 at 04:08

0

I typed this in my URL bar:

javascript:{ var col = 'screwdriver'; var x = '<option value="' + col + '"' + ((col == 'screwdriver') ? ' selected' : '') + '>Very roomy</option>'; alert(x); }

answered Dec 24 '11 at 04:08

Joe Phillips

49,743
32
103
159

JavaScript: IIF like statement

5 Answers5