How to pass a select to a jquery function

Question

I have some javascript where I append an option to a select:

var myuniqueddl = $('#myuniqueddl');

$("<option value='0'>--- Select a value ---</option>").appendTo(myuniqueddl);

I'm actually trying to do this for another select as well.

I'm wondering to avoid code duplication should I be passing the ddl to a method to do this?

function(someType ddl)
{
   $("<option value='0'>--- Select a value ---</option>").appendTo(ddl);
}

Is this a bad idea to be passing a select to a method?

Any better way of doing this?

If this way is ok what type do I pass it in as?

You can pass jQuery objects around, that's fine. – gen_Eric Jun 27 '12 at 20:42 — gen_Eric, Jun 27 '12 at 20:42

user229044 · Accepted Answer · 2012-06-27T20:57:27.057

5

Firstly, yes, it's completely valid to pass a select element into a function to reduce code duplication. In this case, it seems like you're worried about having to type the same function call (appendTo) twice, which really isn't duplication.

Secondly, you cannot specify any type for a JavaScript function parameter. Variables in JavaScript are dynamically typed. You simply specify the variable name:

function myFunction(ddl) {
  $("<option value='0'>--- Select a value ---</option>").appendTo(ddl);
}

edited Jun 27 '12 at 20:57

answered Jun 27 '12 at 20:42

user229044

232,980
40
330
338

Javascript _variables_ don't have types. – TheZ Jun 27 '12 at 20:43
@TheZ. This is so untrue! js is a dynamic type language, but it has type all right! – gdoron Jun 27 '12 at 20:48
4

@gdoron Values have type, variables do not. `typeof(x)` is telling you the type of the object stored in the variable `x`, *not* the type of the variable `x`. – user229044 Jun 27 '12 at 20:51
2

Exactly. There is an important distinction between *variable* and *value*. Observe: `var x = 5; console.log(typeof x); x = 'whee!'; console.log(typeof x);` <-- same **variable**, different **value**, different types. The type, then, is a property of the value and not of the variable. – Chris Baker Jun 27 '12 at 20:54
3

Semantics in computers are pretty important. Your statement was incorrect. – user229044 Jun 27 '12 at 20:55
@gdoron As others have said, _values_ have type whereas _variables_ do not. I was in no way saying that JS itself doesn't have types. C, C++, Java and a host of other languages on the other hand have _variable types_ which determines what the variable can actually hold/reference. – TheZ Jun 27 '12 at 22:08
@AnonyMouse -- please see my comments about not using jQuery+strings to create DOM elements! :) – Chris Baker Jun 27 '12 at 22:11

score 3 · Answer 2 · answered Jun 27 '12 at 20:42

If this way is ok what type do I pass it in as?

It should be jQuery element similar to:

var myuniqueddl = $('#myuniqueddl');

Example:

function addOption(el)
{
   $("<option value='0'>--- Select a value ---</option>").appendTo(el);
}

var myuniqueddl = $('#myuniqueddl');
var myuniqueddl2 = $('#myuniqueddl2');

addOption(myuniqueddl);
addOption(myuniqueddl2);

Or directly:

addOption($('#myuniqueddl'));
addOption($('#myuniqueddl2'));

score 3 · Answer 3 · edited May 23 '17 at 12:12

Javascript functions do not use type hinting, so your function signature:

function(someType ddl)

.. is not valid.

Further, I suggest making your function a little more flexible, and to eliminate the creating of DOM elements by passing strings to jQuery (not efficient, see this benchmark):

var addOption = function(sel, text, value) {
    if (typeof value == 'undefined')
        value = text;
   sel.options[sel.options.length] = new Option(text, value);
}
// usage: addOption($('#myuniqueddl'), '--- Select a value ---');
//    or: addOption($('#myuniqueddl'), '--- Select a value ---', 0);

Documentation

Functions on MDN - https://developer.mozilla.org/en/JavaScript/Guide/Functions
StackOverflow Q/A on creating elements with jQuery - What is the most efficient way to create HTML elements using jQuery?

I would say go one step further and on top of having your generic function, add one that uses your generic and adds the standard "Select a Value" option so that the text you use is consistent throughout and you don't have to keep typing it :) — tonyellard, Jun 27 '12 at 20:50

score 1 · Answer 4 · answered Jun 27 '12 at 20:43

There is nothing wrong with this, but let me give you a valid example, as your code has some syntax errors.

function(ddl)
{
   $("<option value='0'>--- Select a value ---</option>").appendTo(ddl);
}

If this way is ok what type do I pass it in as?

Javascript doesn't use types the same way c# or java do. Just pass a variable, similar to the code above.

How to pass a select to a jquery function

4 Answers4