[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

Get text of select boxes - jquery

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
Panos
Asked:
Panos
  • 11
  • 5
  • 2
  • +1
1 Solution
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
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
 
PanosAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
then change the bind event to onchange, and apply a comon class to all of the select boxes you want to tally
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
PanosAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
change the script to:

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

Open in new window

0
 
GaryCommented:
Shouldn't be using bind.

$(document).on('click','#btnGetSelectText', function (event) {
0
 
PanosAuthor Commented:
I 'm testing the posted code and i get a js error: ReferenceError: selBoxText is not defined
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
forgot to declare the variable:

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

                $('#btnGetSelectText').bind('click', function (event) {
                     $('.shopselect').each(function(){
                         selBoxText += $(this).text()  + ', ' ;
                     });    
                });
       });
0
 
PanosAuthor Commented:
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
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
you're not doing anything with the data once you loop through the elements. add the following right after the loop:

alert( selBoxText );
0
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
Sorry after the loop:
 select
    test1
    test2
  ,
    select
    test3
  ,
0
 
Chris StanyonCommented:
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
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
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
 
PanosAuthor Commented:
I just realized that i get  the option value instead of the text.
Can you take a look please?
0
 
GaryCommented:
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
 
Chris StanyonCommented:
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
 
PanosAuthor Commented:
Thank you it is working perfect
0
 
PanosAuthor Commented:
Thank you
regards
Panos
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 11
  • 5
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now