Jquery, split select value to two strings and assign to two inputs using arrays

Question

I need to split the value of my html select option and pass the split results into two separate input fields. I tried to code this before but ended up with a not so DRY result.

Could someone help me understand how to pass an array's value to each element in another array? This was even confusing to write. :(

This is what I have so far;

$(document).ready(function() {

  $('#media-size').change(function() {
    var selectValue = $(this).val();
    var arr = selectValue.split("x");
    var valOne = arr[0];
    var valTwo = arr[1];

      $('.media-value').each(function() {
        $(this).val(arr);
    });
  });
});

Here's a link to the fiddle I've been working on; Click Here

Any guidance would be much appreciated.

Regards, -B.

P.s.

To clarify, before this question is marked as a duplicate. I'm looking for a Jquery answer, not a java answer which is all I seem to be able to find on the subject.

I would actually recommend using data elements for this on each option, so you don't have to do any split logic. — Taplar
– Taplar, Commented Jul 6, 2018 at 16:49
I understand that's a route I could have taken, but I'm trying to force myself to learn a little more complex Jquery coding. Stupidly I thought this would be a great place to start... -.- * (face palm) — Lewis
– Lewis, Commented Jul 6, 2018 at 16:51
The main reason I suggest this is because it's a typical pattern in coding that if you find yourself taking data and breaking it down into sub-parts to use, it becomes a code smell to determine if you should change your data model so you do not have to do that logic every time. If the majority of the time you need the smaller parts, you should provide the smaller parts in the data model. — Taplar
– Taplar, Commented Jul 6, 2018 at 16:58

Gerardo BLANCO · Accepted Answer · 2018-07-06 16:46:46Z

4

Actually you where really close. You just need to get the index of the iteration to get the specific arra value.

I recomend you follow the jQuery documentation for each()

Hope this help :>

$(document).ready(function() {

  $('#media-size').change(function() {
    var selectValue = $(this).val();
    var arr = selectValue.split("x");

    $('.media-value').each(function(index) {
      $(this).val(arr[index]);
    });
  });
});

input {
  margin: .5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="custom-select" id="media-size">
  <option value="00x00" selected>Finish Size...</option>
  <option value="594x841">A1</option>
  <option value="420x594">A2</option>
  <option value="297x420">A3</option>
  <option value="210x297">A4</option>
  <option value="148x210">A5</option>
  <option value="105x148">A6</option>
  <option value="74x105">A7</option>
  <option value="85x55">UK Business Card</option>
  <option value="85x54">UK Plastic Card</option>
  <option value="00x00">Custom Size</option>
</select>

<input type="text" class="form-control media-value" placeholder="00" aria-label="Finish size in millimetres" aria-describedby="basic-addon2">
<span>x</span>
<input type="text" class="form-control media-value" placeholder="00" aria-label="Finish size in millimetres" aria-describedby="basic-addon2">

answered Jul 6, 2018 at 16:46

Gerardo BLANCO

5,6481 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lewis Over a year ago

Wonderful, Thanks for the assist. I basically get the idea, but don't fully understand the docs. I think I'll need to read up a little more before I fully grasp it.

Gerardo BLANCO Over a year ago

Jajajaja its practice mostly. Code On!

Taplar · Accepted Answer · 2018-07-06 16:55:23Z

1

Offering an alternative to the split logic.

/*
   This logic suggests using data attributes on your options, such as...
   <option data-width="640" data-height="480">640x480</option>
 */
$(document).ready(function() {
  var $mediaSize = $('#media-size');
  var $mediaValues = $('.media-value');

  $mediaSize.change(function() {
    var $selectedOption = $mediaSize.find('option:selected');
    
    //optionally you could give each media value a class to
    //specify width or height, and filter on that, rather
    //than using eq()
    $mediaValues.eq(0).val($selectedOption.data('width'));
    $mediaValues.eq(1).val($selectedOption.data('height'));
  });
});

answered Jul 6, 2018 at 16:55

Taplar

25k4 gold badges24 silver badges36 bronze badges

2 Comments

Lewis Over a year ago

+1 for covering all bases. This just felt a bit bulky to me though, and the cleaner logic felt more appealing. (Even if it is a pain to understand.)

Taplar Over a year ago

Please keep in mind that one objective of coding is to make things readable. Readability leads to maintainability, which is paramount for the majority of programmers. @Beaniie

Collectives™ on Stack Overflow

Jquery, split select value to two strings and assign to two inputs using arrays

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related