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

时间:2015-01-06 22:39:21

标签: jquery

我试图只显示具有相同数字的div。 数字是数据库中的id,所以我可以把它放在任何地方。 这也仅适用于第一个选择。 我需要将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','');
    } 
});
});

提前致谢

2 个答案:

答案 0 :(得分:0)

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

类= “changeStatus”

你的jquery

$('。changeStatus')。change(function(){... your code here}});

答案 1 :(得分:0)

将select上的id更改为'changeStatus'类,然后更改jQuery以在change事件中使用该类。然后从name属性中取出id并更改每个特定选择的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', '');
        }
    });
});