Question

编辑：当我添加了精简版的HTML时，我忘记为div标签分配唯一的ID。

我在下面的html中解决了这个问题。

原帖：我有一个工作的Wordpress短代码，创建一个下拉列表。当您进行选择时，下拉列表下方会显示一个链接。

我想解决的问题是如何让jquery在第二个下拉列表中工作，即'foo2'或从同一个排序代码在页面上创建的任意数量的下拉列表。

例如，这是在同一页面上两次使用短代码生成的html。

<select id="foo1">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 1</option>
    <option value="option2">Module 2</option>
</select>

<div id="m1-option1" class="bar" style="display: none;"><a href="#">download M1</a></div>
<div id="m1-option2" class="bar" style="display: none;"><a href="#">download M2</a></div>

<select id="foo2">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="m2-option1" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="m2-option2" class="bar" style="display: none;"><a href="#">download M220</a></div>

这是jquery :(工作演示：http://jsfiddle.net/hookedonweb/t7cSg/）

我不希望jquery只对短代码中的所有<select>标签起作用，在html中添加另一个标识符以从短代码中挑出<select>是没有问题的

jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('#foo1').change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});

Answer 1

试试这个

jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('[id*="foo"]').change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});

另请注意，页面中的 ID 应该是唯一的。

您可以使用属性包含选择器* ，或者只是为所有选择添加相同的类。

Answer 2

更新了JSFiddle：http://jsfiddle.net/t7cSg/5/

这可能不是最佳解决方案，因为一旦插件更新，您将需要记住进行此更改，但也许您可以为该短代码结果提供一个类。

例如：

<select id="foo1" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 1</option>
    <option value="option2">Module 2</option>
</select>

<div id="option1" class="bar" style="display: none;"><a href="#">download M1</a></div>
<div id="option2" class="bar" style="display: none;"><a href="#">download M2</a></div>

<select id="foo2" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="option3" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="option4" class="bar" style="display: none;"><a href="#">download M220</a></div>

<select id="foo3" class="foos">
    <option value="option0">Please select a module to download</option>
    <option value="option1">Module 110</option>
    <option value="option2">Module 220</option>
</select>

<div id="option5" class="bar" style="display: none;"><a href="#">download M110</a></div>
<div id="option6" class="bar" style="display: none;"><a href="#">download M220</a></div>

你的jQuery就是这样：

jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('.foos).change(function () {
        $('.bar').hide();
        $('#'+$(this).val()).show();
    })
});

我希望这有效/帮助

Answer 3

难道你不能给你想要使用类的选择（例如foo），然后只是定位它吗？

$('.bar').hide();
$('.foo').change(function () {
    $('.bar').hide();
    $('#' + $(this).val()).show();
})

<强> jsFiddle example

Answer 4

试试这个：

jQuery(document).ready(function ($) {
    $('.bar').hide();
    $('#foo1').change(function () {
      $('.bar').hide();
      $('[id="'+$(this).val()+'"]').show();
    });
});

注意：

单个文档上的多个元素不允许使用相同id。如果发生这种情况，只会先执行。

jquery在<select>标记</select>中动态获取ID参数

4 个答案:

注意：