需要从 select .change 中取消隐藏特定的 div

Question

我试图只显示具有相同数字的 div。该数字是数据库中的 ID，因此我可以将其放在任何地方。这也仅适用于第一个 select。我需要将 ID 号传递给 jQuery，这样我就可以将它传递给取消隐藏 div-XXX。我只是不知道该怎么做。

http://jsfiddle.net/TacoFiesta/5wge2L2e/4/

html

Status:
<select name="Status-335" id="changeStatus">
  <option>Polishing</option>
  <option>Photos</option>
  <option>Done</option>
</select>
<div class="photosNeededCheck" id="div-335" style="display:none;">...335...<br></div>

Status:
<select name="Status-360" id="changeStatus">
  <option>Polishing</option>
  <option>Photos</option>
  <option>Done</option>
</select>
<div class="photosNeededCheck" id="div-360" style="display:none;">...360...<br></div>

还有 jQuery

$("#changeStatus").change(function () {
    // hide all optional elements
    $('.photosNeededCheck').css('display','none');

$("#changeStatus option:selected").each(function () {
    if($(this).val() == "Photos") {
        $('.photosNeededCheck').css('display','');
    } 
});
});

提前致谢

Answer 1

您不能在不同的 DOM 元素上使用相同的 ID。请改用 CLASS。

Class="changeStatus"

还有你的jquery

$('.changeStatus').change(function(){…你的代码…});

Answer 2

将您的 select 上的 ID 更改为 'changeStatus' 的 class，然后更改您的 jQuery 以在更改事件中使用该 class .然后从 name 属性中取出 id 并改变每个特定 select.

的 div 的可见性

$(".changeStatus").change(function () {
    // hide all optional elements
    var select = this;
    $('.photosNeededCheck').css('display', 'none');

    $("option:selected",select).each(function () {
        if ($(this).val() == "Photos") {
            var id = $(select).attr('name').split('-')[1];
            $('#div-'+id).css('display', '');
        }
    });
});

需要从 select .change 中取消隐藏特定的 div

Need to unhide specific div from select .change

jquery