<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>RubberNeck Designs &#187; javaScript Tips</title>
	<atom:link href="http://www.rubberneckdesigns.com/category/javascript-tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rubberneckdesigns.com</link>
	<description>Drupal Web Developer Notes &#38; Sharing</description>
	<lastBuildDate>Tue, 31 Jan 2012 00:28:02 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to Get All the Selected Values from a Multi-Select with jQuery</title>
		<link>http://www.rubberneckdesigns.com/javascript-tips/how-to-get-all-the-selected-values-from-a-multi-select-with-jquery/</link>
		<comments>http://www.rubberneckdesigns.com/javascript-tips/how-to-get-all-the-selected-values-from-a-multi-select-with-jquery/#comments</comments>
		<pubDate>Sat, 31 Dec 2011 19:27:17 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[javaScript Tips]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.rubberneckdesigns.com/?p=471</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>Need to know how to get all the selected values or text values from a multi select element (drop down)? Its simple with jQuery!</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">&nbsp;
$document.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> vals <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> textvals <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> getMultipleSelectVals<span style="color: #009900;">&#40;</span> id <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'#'</span> <span style="color: #339933;">+</span> id <span style="color: #339933;">+</span> <span style="color: #3366CC;">' :selected'</span> <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> i<span style="color: #339933;">,</span> selected <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      vals<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span> selected <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">val</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      textvals<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span> selected <span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #006600; font-style: italic;">// end function</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span><span style="color: #006600; font-style: italic;">//$document.ready</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://www.rubberneckdesigns.com/javascript-tips/how-to-get-all-the-selected-values-from-a-multi-select-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dynamically Change the onClick, onChange (or other) Value of an Element</title>
		<link>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/</link>
		<comments>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/#comments</comments>
		<pubDate>Fri, 15 May 2009 16:38:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[javaScript Tips]]></category>
		<category><![CDATA[User Iterface Design]]></category>

		<guid isPermaLink="false">http://rubberneckdesigns.com/?p=106</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>Typically, you have an element such as an “<span style="color: #008000;">input</span>”, “<span style="color: #008000;">a</span>” or “<span style="color: #008000;">select</span> (options)” that has an attribute of “<span style="color: #008000;">onClick</span>”, “<span style="color: #008000;">onMouseOver</span>” or “<span style="color: #008000;">onChange</span>” with a value of some function that will execute upon the event represented by the attribute.</p>
<p><span style="color: #0000ff;"><strong>UPDATE</strong></span>: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:</p>
<p>button_element.onclick = function() {doSomething();};</p>
<p>Thanks! <a href="http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie">to this pos</a>t. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing <img class="alignnone" title="stackoverflow.com" src="http://stackoverflow.com/content/img/so/logo.png" alt="" width="128" height="31" /></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">To assign a new value to the attribute, you need to identify the element you want to change like this:</span></span></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">elem =  document.getElementById(&#8220;myElementId&#8221;)</span></span></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">Then simply assign the new value to the attribute like this:</span></span></p>
<p><span style="color: #008000;"><span style="text-decoration: line-through;"><span style="color: #ff6600;">elem.attributes["onclick"].value = &#8220;myUpdatedFunction(&#8216;My parameter&#8217;)” ;</span></span><br />
</span><br />
Now, if someone clicks on the element, the new updated version of <span style="color: #008000;">myUpdatedFunction()</span> will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.</p>
<p>This method will also work for other attribute types such as <span style="color: #008000;">onMouseOver</span>, <span style="color: #008000;">onChange</span> an so on.</p>
<p>I hope this helps.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

