Question

我在这里找到了一个选择框的小提琴：http://jsfiddle.net/davidThomas/5Eebm/效果很好，但我需要一个动态的选择框，这意味着动态的#id。作为jQuery和javascript的新手，我将如何在jq中创建变量选择器，例如，我在我的php中使用动态[idx]值将每个id递增1（例如：prophlist_1，choose_1; prophlist_2，select_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 class="choose">

然后使用该类将相同的更改处理程序绑定到所有这些：

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

然后在处理程序中而不是使用id来查找相关div，使用像.next()这样的DOM navigation methods来根据其在标记中的相对位置来查找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/

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

1 个答案: