如何在jQuery中使用变量ID作为选择器

Question

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 (eg: 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());
});

Answer 1

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/