如何在jQuery中使用變量ID作為選擇器

Question

我在這里找到了一個選擇框的小提琴： http : //jsfiddle.net/davidThomas/5Eebm/效果很好，但是我需要有一個動態的選擇框，這意味着一個動態的ID。 作為jQuery和javascript的新手，如果我要在php中使用動態[idx]值將每個id加1（例如，prophlist_1，choice_1; prophlist_2，choice_2;等）。 任何見解將不勝感激。

這是小提琴代碼：

<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

我需要有一個動態的選擇框數，這意味着一個動態的ID數

不需要。您完全不需要使用元素ID來使此功能起作用。 您可以給select元素相同的類 ：

<select class="choose">

然后使用該類將相同的更改處理程序綁定到所有這些更改處理程序：

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

然后在處理程序中，而不是使用id來找到相關的div，而是使用.next()類的DOM導航方法根據div在標記中的相對位置來查找div：

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

另外，如果display:none; ul元素僅用於保存描述，為什么不刪除它並將描述直接添加到每個選項中，如下所示：

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

將您的函數放在一起可能看起來像這樣：

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

這是您的提琴的更新版本，顯示了一點點JS處理多個選擇元素： http : //jsfiddle.net/5Eebm/75/