Solved

Get text of select boxes - jquery

Posted on 2014-02-05
20
343 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 11
  • 5
  • 2
  • +1
20 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 39835669
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
ID: 39835712
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 33

Expert Comment

by:Big Monty
ID: 39835731
then change the bind event to onchange, and apply a comon class to all of the select boxes you want to tally
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 2

Author Comment

by:Panos
ID: 39835761
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 33

Expert Comment

by:Big Monty
ID: 39835781
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
ID: 39835835
Shouldn't be using bind.

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

Author Comment

by:Panos
ID: 39835887
I 'm testing the posted code and i get a js error: ReferenceError: selBoxText is not defined
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 39835904
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
ID: 39835929
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 33

Expert Comment

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

alert( selBoxText );
0
 
LVL 2

Author Comment

by:Panos
ID: 39835990
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
ID: 39835994
Sorry after the loop:
 select
    test1
    test2
  ,
    select
    test3
  ,
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39836750
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
ID: 39836987
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
ID: 39837000
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
ID: 39837135
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
ID: 39837159
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 43

Accepted Solution

by:
Chris Stanyon earned 250 total points
ID: 39837214
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
ID: 39837235
Thank you it is working perfect
0
 
LVL 2

Author Closing Comment

by:Panos
ID: 39837237
Thank you
regards
Panos
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

751 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