0

I found a fiddle for a selectbox here: http://jsfiddle.net/davidThomas/5Eebm/ that works nicely but i need to have a dynamic # of selectboxes which means a dynamic # of ids. Being brand new to jQuery and javascript, how would I go about creating a variable selector in the jq if, for instance I were to use a dynamic [idx] value in my php to increment each id by 1 (e.g.: prophlist_1, choose_1; prophlist_2, choose_2; etc). Any insight at all would be very appreciated.

here's the fiddle code:

<ul id="prophlist" style="display:none;">
<li>Prophecy 1 text</li>
<li>Prophecy 2 text</li>
<li>Prophecy 3 text</li>
<li>Prophecy 4 text</li>
<li>Prophecy 5 text</li>
<li>Prophecy 6 text</li>
<li>Prophecy 7 text</li>
<li>Prophecy 8 text</li>
<li>Prophecy 9 text</li>
<li>Prophecy 10 text</li>
</ul>
<select id="choose">
<option value="1">Title 1</option>
<option value="2">Title 2</option>
<option value="3">Title 3</option>
<option value="4">Title 4</option>
<option value="5">Title 5</option>
<option value="6">Title 6</option>
<option value="7">Title 7</option>
<option value="8">Title 8</option>
<option value="9">Title 9</option>
<option value="10">Title 10</option>
</select>

<div id="update">
</div>

$('#choose').change(
function(){
    var i = this.selectedIndex;
    $('#update').text($('#prophlist li').eq(i).text());
});
1
  • It'd be nice if the title of the question was to be reworded to reflect the question requirement, not the suggested solution. Commented Jan 24, 2015 at 4:26

1 Answer 1

2

I need to have a dynamic # of select boxes which means a dynamic # of ids

No. You don't need to use element ids at all to get this functionality working. You can instead give the select elements the same class:

<select class="choose">

And then use that class to bind the same change handler to all of them:

$(".choose").change(function() { ... });

And then within the handler rather than using an id to find the related div, use DOM navigation methods like .next() to find the div based on its relative position in the markup:

    $(this).next().text(...)

Also, if the display:none; ul element is there solely to hold the descriptions, why don't you get rid of it and add the descriptions directly to each option like this:

<option value="1" data-desc="Prophecy text 1">Title 1</option>

Putting that together your function might look like this:

$('.choose').change(function(){
    $(this).next().text( $(this).find(':selected').attr('data-desc') );
})

Here's an updated version of your fiddle that shows that one little bit of JS handling multiple select elements: http://jsfiddle.net/5Eebm/75/

1
  • Thanks. We're almost there... I don't want to display the value of the option description in the div, i'd like to display the value of the li. see here (jsfiddle.net/davidThomas/5Eebm) how the option text "Title 1" brings up the li text "Prophecy 1 text"...
    – pjldesign
    Commented Jan 25, 2015 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.