Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

js function with multiple select

Posted on 2014-08-11
13
Medium Priority
?
332 Views
Last Modified: 2014-08-12
I have this code

<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" multiple onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
   <option value="3">Option #3</option>
   <option value="4">Option #4</option>
  </select>
 </body>
</html>

Open in new window


When I make the first selection the alert comes up ok. But with multiple selection it always alerts with the topmost selection.

How can I file the function with the selection I am making?
0
Comment
Question by:robrodp
  • 6
  • 5
12 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 400 total points
ID: 40253948
You can't in IE, all you can get is the first selected option or an array of the selected option values.
0
 
LVL 6

Accepted Solution

by:
Ravi Kalla earned 1600 total points
ID: 40253950
<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var select1 = document.getElementById("selectBox");
var tmpStr = "";
for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected)
            tmpStr += select1.options[i].value;
    }
    alert(tmpStr);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" multiple onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
   <option value="3">Option #3</option>
   <option value="4">Option #4</option>
  </select>
 </body>
</html>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40253967
We are talking about alerting the value of the option they clicked even if other options are already selected?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:robrodp
ID: 40253977
That is right
0
 
LVL 58

Expert Comment

by:Gary
ID: 40253984
So my previous comment stands - it's not possible in IE, works in FF et al but it is not part of the spec that browsers allow this so shouldn't be used in case the browsers drop support for it.
0
 

Author Comment

by:robrodp
ID: 40253988
Does the trick

Thx
0
 
LVL 58

Expert Comment

by:Gary
ID: 40253993
I thought you wanted only the value of the option they clicked not all the values together?
0
 

Author Comment

by:robrodp
ID: 40254135
Hi Gary

Yes that is what I need. I changed the code eliminating the "+" that concatenates the values and it works. I tried it in ie and it is working... so far.  I think you do not recommend this approach. Am I right?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40254143
That code doesn't do that, it will end up giving you the value of the last selected option value in the list.
Try it - click 2 then 4 then 1 - it will alert 2 then 4 then 4

It cannot be done in IE
0
 

Author Comment

by:robrodp
ID: 40254177
Right.

Then is each time it runs the function I want it to run an ajax program with that specific variable. I am getting there. I just posted another question to that regard.

Thx Gary
0
 
LVL 58

Expert Comment

by:Gary
ID: 40254191
That will not work with a dropdown, your option is to use a list e.g.

<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
</ul>

Open in new window

I think this question should be reopened as the accepted answer is incorrect.
0
 

Author Comment

by:robrodp
ID: 40254372
How can I close it?
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question