Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Eric Ewers
Eric Ewers
13,976 Points

Split String with JQuery

How can I split the values from a select box when they have a | in between them. Like so: value="100|200", but I only want to return the 200.

Please see CodePen example:

http://codepen.io/ericewers/pen/LVOxKb

1 Answer

Juan Martin
Juan Martin
14,335 Points

Hello my friend,

I did it this way for JavaScript:

        $(".product").change(function() {
            var combined = 0;
                combined = parseInt(this.value.split('|')[1]);  // here you'll get the second value, [0] will get the first one
            $("#result").html(combined);
        }).trigger("change");

For the HTML, I've added this to the first option value (0|0):

<select name="product1" class="product">
  <option value='0|0'>0</option>
  <option value='1|100'>1 ($100)</option>
  <option value='2|200'>2 ($200)</option>
  <option value='3|300'>3 ($300)</option>
  <option value='4|400'>4 ($400)</option>
  <option value='5|500'>5 ($500)</option>
</select>

<p><strong>
  $<span id="result">0</span>
</strong></p>
<!-- End Total Price -->

Hope this helps :)

Eric Ewers
Eric Ewers
13,976 Points

This works, thank you so much!

You even cleaned up the code a bit.

Juan Martin
Juan Martin
14,335 Points

You're welcome my friend,

You can even clean the JS a little bit more like this:

$(".product").change(function() {
  var combined = this.value.split('|')[1];
  $("#result").html(combined);
}).trigger("change");

There's no need of initializing combined as 0, as well as for the parseInt function to use it, as it's just text what you're showing.

And you can even clean it more like this:

$(".product").change(function() {
  $("#result").html(this.value.split('|')[1]);
}).trigger("change");

Regards :)

Eric Ewers
Eric Ewers
13,976 Points

I've done some more testing. When using multiple selects, the code has to be like this:

        $(".product").change(function() {
            var combined = 0;
            $(".product").each(function() {
                combined += parseInt(this.value.split('|')[1]);
            });
            $("#result").html(combined);
        }).trigger("change");

Otherwise, the sum of the values don't add up...it will keep switching to the last selected value.

Juan Martin
Juan Martin
14,335 Points

I didn't know about that, I thought it was just for "displaying purposes" hehe, you're right!