Solved

Get text of select boxes - jquery

Posted on 2014-02-05
20
339 Views
Last Modified: 2014-02-05
Hello experts
I have related selects with the same name, class and different id 's (using index).
I need to show the text of the selects on each select function , separated with a comma starting from the lowest index to the highest in a new div: showcategories
Any help?
My code: (i have only 2 selects but they can be n - selects)
<div class="shopdiv" id="shopdiv_1">
  <label for="shop_1">category</label>
  <select class="shopselect isrequired2 valid_if" id="shop_1" name="shop">
    <option selected="selected" value="">select</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
</div>
<div class="shopdiv nextsl" id="shopdiv_2">
  <label for="shop_2">subcategory</label>
  <select class="shopselect isrequired2 valid_if" id="shop_2" name="shop">
    <option value="">select</option>
    <option value="3">test3</option>
  </select>
</div>
<div id="showcategories">
 <span><i></i></span>
</div>
0
Comment
Question by:Panos
  • 11
  • 5
  • 2
  • +1
20 Comments
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
try something like this:

 $('select').each(function(){
    selBoxText += $(this).text()  + ', ' ;
  });

Open in new window


that will get you all of the selected text from each select box. From there, you just need to attach it to a trigger and then write the output where you want it.

Full Code:

<div class="shopdiv" id="shopdiv_1">
<button id="btnGetSelectText">Get select box texts</button>
  <label for="shop_1">category</label>
  <select class="shopselect isrequired2 valid_if" id="shop_1" name="shop">
    <option selected="selected" value="">select</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
</div>
<div class="shopdiv nextsl" id="shopdiv_2">
  <label for="shop_2">subcategory</label>
  <select class="shopselect isrequired2 valid_if" id="shop_2" name="shop">
    <option value="">select</option>
    <option value="3">test3</option>
  </select>
</div>
<div id="showcategories">
 <span><i></i></span>
</div>

<script type="text/javascript">
        $(document).ready(function () { 
                $('#btnGetSelectText').bind('click', function (event) {
                     $('select').each(function(){
                         selBoxText += $(this).text()  + ', ' ;
                     });     
                });
       });
</script>

Open in new window

0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi
Thank you for your post
1. I prefer to show the user what he has allready select onChange
2. I would like to get a class dependet function.
Like:
$("body").on("change", ".shopselect", function (e) {
    e.preventDefault();
}
0
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
then change the bind event to onchange, and apply a comon class to all of the select boxes you want to tally
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
On pageload i have only one select box. The other related select s are not there so i m using this function and a common class shopselect.
0
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
change the script to:

 $(document).ready(function () { 
                $('#btnGetSelectText').bind('click', function (event) {
                     $('.shopselect').each(function(){
                         selBoxText += $(this).text()  + ', ' ;
                     });     
                });
       });

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Shouldn't be using bind.

$(document).on('click','#btnGetSelectText', function (event) {
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
I 'm testing the posted code and i get a js error: ReferenceError: selBoxText is not defined
0
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
forgot to declare the variable:

$(document).ready(function () {
         var selBoxText = '';

                $('#btnGetSelectText').bind('click', function (event) {
                     $('.shopselect').each(function(){
                         selBoxText += $(this).text()  + ', ' ;
                     });    
                });
       });
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Posted the whole code. i have no error but i see no function
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<div class="shopdiv" id="shopdiv_1">
<button id="btnGetSelectText">Get select box texts</button>
  <label for="shop_1">category</label>
  <select class="shopselect isrequired2 valid_if" id="shop_1" name="shop">
    <option selected="selected" value="">select</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
  </select>
</div>
<div class="shopdiv nextsl" id="shopdiv_2">
  <label for="shop_2">subcategory</label>
  <select class="shopselect isrequired2 valid_if" id="shop_2" name="shop">
    <option value="">select</option>
    <option value="3">test3</option>
  </select>
</div>
<div id="showcategories">
 <span><i></i></span>
</div>

<script type="text/javascript">
       $(document).ready(function () {
         var selBoxText = '';

                $('#btnGetSelectText').bind('click', function (event) {
                     $('.shopselect').each(function(){
                         selBoxText += $(this).text()  + ', ' ;
                     });    
                });
       }); 
</script>
</body>
</html>

Open in new window

0
 
LVL 32

Expert Comment

by:Big Monty
Comment Utility
you're not doing anything with the data once you loop through the elements. add the following right after the loop:

alert( selBoxText );
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 2

Author Comment

by:Panos
Comment Utility
I get two alerts (because of my two selects)
1)  select
    test1
    test2
  ,

2)
select
    test1
    test2
  ,
    select
    test3
  ,


I have selected test1 in the first select and test3 in the second
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Sorry after the loop:
 select
    test1
    test2
  ,
    select
    test3
  ,
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
Have a look at this and see if it makes sense.

<select class="shopselect">
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

<select class="shopselect">
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

<div id="response"></div>

Open in new window

$('body').on('change', '.shopselect', function() {
    var myValues = new Array();
    $('.shopselect').each(function() {
        myValues.push($(this).val());
    })
    $('#response').html(myValues.join(','));
})

Open in new window

You can see a working demo of it here:

http://jsfiddle.net/ChrisStanyon/5C5pL/
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi
Your code is near to the solution.
The problem is to get this work with option values "" too.
like:
<option selected="selected" value="">select</option>
<option value="1">test1</option>
<option value="2">test2</option>

and
<option value="">select</option>
<option value="3">test3</option>

because of the comma (,)

If nothing selected i get a comma (,) or if the first is "" and the second "3" i get ,3  or opposide "1" and "" brings 1,
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
I think that is doing the trick:
 $('body').on('change', '.shopselect', function () {

     var myValues = new Array();
     $('.shopselect').each(function () {
         selected = $(this).val();
         if (selected == "") {} else {
             myValues.push(selected);
         }
     })
     $('#response').html(myValues.join(','));
 })
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
I just realized that i get  the option value instead of the text.
Can you take a look please?
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
No points for this as Chris did the work.
 
$('body').on('change', '.shopselect', function () {
     var myValues = new Array();
     $('.shopselect').each(function () {
         if ($(this).val()!='') {
             myValues.push($(this).html());
         }
     })
     $('#response').html(myValues.join(','));
 }) 

Open in new window

0
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 250 total points
Comment Utility
Almost there :)

Here you go. This will get the selected text

$('body').on('change', '.shopselect', function() {
    var myValues = new Array();
    $('.shopselect').each(function() {        
        if ($(this).val() != '') {
            myValues.push( $('option:selected', this).text() );
        }
    });
    $('#response').html(myValues.join(','));
});

Open in new window

0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Thank you it is working perfect
0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you
regards
Panos
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn how to dynamically set the form action using jQuery.
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)

743 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now