CODEWITHSUNDEEP
jqueryselect
xxx12123
xxx12123

Reputation: 343

update text field with select value with dynamic classes

I have an ordered list of elements that each have a dynamically generated class starting with sets-, or reps. I want to update the span text that has a generated class, with the value of the select value that has the same class as the text span.
In other words, when I select 3 from the dropdown, I want the text of the span above to change to 3.
So far I have managed to update the span text with the option value, but the update occurs in all <li> tags, because I'm not matching the generated classes yet. How can I check that the classes of the span and the class of the select tag that I've changed match?

Html:

<ol>
<li>
<h5 class="toggle">
<span class="sets174">1</span> x <span class="reps174">1</span><a href="http://localhost:8888/wordpress/test/" title="test">test
</a>
</h5>

<div class="toggle-content" style="display: none;">
<p></p>
sets: 
<select name="sets" class="sets174"><option>1</option><option>2</option><option>3</option>
</select>
reps: <select name="reps" class="reps174"><option>1</option><option>2</option><option>3</option></select></div></div>
</li>
<li>/*class=”sets374” etc*/</li>
<ol>

js:

var setsSpan = $('.toggle span[class*="sets"]'),
        repsSpan = $('.toggle span[class*="reps"]'),
        setsSelect = $('.toggle-content select[class*="sets"]'),
        repsSelect = $('.toggle-content select[class*="reps"]'),
        toggleContentClass = $('.toggle-content select').attr('class');
        var setsLength = setsSpan.length;
        setsSpan.text(setsSelect.val());
        repsSpan.text(repsSelect.val());

        setsSelect.change(function() {
   //if the class of this matches the class of a setsSpan element then do the next thing?
            setsSpan.text($(this).val());
        });
        repsSelect.change(function() {
            repsSpan.text($(this).val());
        });

Fiddle: http://jsfiddle.net/AknoxA/WGh8d/4/

Upvotes: 0

Views: 344

Answers (1)

Exlord
Exlord

Reputation: 5371

why don't you do it like this :

setsSelect.change(function() {
    var spanClass = $(this).attr('class');
    $('span.'+spanClass).text($(this).val());
});

Upvotes: 0

Related Questions