• Awning Works 1
  • Socaz 2
  • Socaz 1
  • Randy Montana 3
  • Randy Montana 2
  • Randy Montana 1
  • Rodgers & Hammerstein 3
  • Rodgers & Hammerstein 2
  • Rodgers and Hammerstein 1
  • Love Fine Art
  • Dec
  • 31
  • 2011

How to Get All the Selected Values from a Multi-Select with jQuery

Posted by admin In How To, javaScript Tips, jQuery, Web Design | No Comments »

Need to know how to get all the selected values or text values from a multi select element (drop down)? Its simple with jQuery!

Start by declaring an array. One for the values of the multi select element and one for the text values. Well, if you even need the text values from the multi select, that is.

Now we can use the ‘ :selected’ jQuery selector. That we get all the items from the select element that the user has selected. We can use the jQuery ‘each()’ function to iterate over the select element and gather the values and texts into the arrays using jQuery’s standard ‘.val()’ and ‘.text()’ functions.

Next iterate through the selected items, using the standard val() to return the selected option’s value or text() to grab the actual display text that made up the list item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
$document.ready({
 
var vals = [];
var textvals = [];
 
function getMultipleSelectVals( id ){
  $( '#' + id + ' :selected' ).each( function( i, selected ) {
      vals[i] = $( selected ).val();
      textvals[i] = $( selected ).text();
  });
}// end function
 
});//$document.ready

Read More

  • May
  • 15
  • 2009

Dynamically Change the onClick, onChange (or other) Value of an Element

Posted by admin In AJAX, javaScript Tips, User Iterface Design | No Comments »

If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.

Typically, you have an element such as an “input”, “a” or “select (options)” that has an attribute of “onClick”, “onMouseOver” or “onChange” with a value of some function that will execute upon the event represented by the attribute.

UPDATE: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:

button_element.onclick = function() {doSomething();};

Thanks! to this post. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing

To assign a new value to the attribute, you need to identify the element you want to change like this:

elem =  document.getElementById(“myElementId”)

Then simply assign the new value to the attribute like this:

elem.attributes["onclick"].value = “myUpdatedFunction(‘My parameter’)” ;

Now, if someone clicks on the element, the new updated version of myUpdatedFunction() will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.

This method will also work for other attribute types such as onMouseOver, onChange an so on.

I hope this helps.

Read More

Flickr Stream