jQuery equivalent of JavaScript function

Question

I'm trying to compare the differences between jQuery and JavaScript in a project, but I can't seem to figure out how to rewrite one function because I'm not sure how I'm supposed to reference a jQuery object. I'm concatenating a string to pass as AJAX parameters. Here is the JavaScript:

function getSelectValues(select) {
  var values = "";
  var sep = "";
  for(var i = 0; i < select.length; i++) {
    if (select.options[i].selected) {
      values += sep + (select.options[i].value);
      sep = ", ";
    }
  }
  return values;
}

I thought the below might be the jQuery equivalent, passing in $(this), but I can't seem to get it to work. I wanted it to return empty string if nothing is selected, but it's returning null instead.

function getSelectValues(select) {
  var values = "";
  var sep = "";
  $("option:selected", select).each(function(){
    values += sep + ($(this.val()));
    sep = ", ";
  });
  return values;
}

I also tried:

$(select).each(function(){
  $("option:selected", this).each(function(){
    values += sep + ($(this.val()));
    sep = ", ";
  });
});

That didn't work either.

DominikGuzei · Accepted Answer · 2012-06-19 19:49:47Z

2

You simply can use .val() for select with option multiple turned on:

The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of <select multiple="multiple"> elements, the .val() method returns an array containing each selected option; if no option is selected, it returns null.

http://api.jquery.com/val/

answered Jun 19, 2012 at 19:49

DominikGuzei

5994 silver badges5 bronze badges

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

1 Comment

Zuul Over a year ago

The OP doesn't want null to be returned, but an empty string.

Carl · Accepted Answer · 2012-06-19 19:57:10Z

1

For a select element $(select).val() returns the selected value (for single select) or an array or null for a multi-select. I'm assuming from the question that you have a multi-select, so you probably want:

var vals = $(select).val();
return vals ? vals.join(', ') : "";

answered Jun 19, 2012 at 19:57

Carl

7,5841 gold badge43 silver badges67 bronze badges

Comments

moribvndvs · Accepted Answer · 2012-06-19 19:49:03Z

0

When you use each, this is the raw HTML element. You need to wrap in jQuery before invoking jQuery methods.

answered Jun 19, 2012 at 19:49

moribvndvs

42.5k12 gold badges138 silver badges152 bronze badges

Comments

feeela · Accepted Answer · 2012-06-19 19:52:54Z

0

You didn't read any documentation or tutorials, did you?

$.extend({
    myFunc : function( someArg ) {
        /* …function code… */
    }
});
$.myFunc( args );

See: http://jquery-howto.blogspot.de/2009/11/create-callback-functions-for-your.html

answered Jun 19, 2012 at 19:52

feeela

30k7 gold badges61 silver badges73 bronze badges

2 Comments

Risu Over a year ago

Thank you and I appreciate your feedback. I never searched for plugins since I'm not building a plugin, so I never came across the tutorial you suggested.

feeela Over a year ago

@Risu That's not only related to plugins, as you can do very different things with functions set up "the jQuery way". I just found that tutorial by searching for "jquery+functions". You are extending jQuery itself with an own function, using that way. You could also extend your own extensions…

Collectives™ on Stack Overflow

jQuery equivalent of JavaScript function

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related