0

我有一些测试代码打算在选择某个选项时显示一个选择框，然后在更改该选项时隐藏。

HTML：

<form>
    <select id="sel1" name="sel1" class="chzn-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select id="sel2" name="sel2" selected="selected" style="display:none">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

JS：

var selCategory = $('#sel1');
$(selCategory).change(function () {
  $('option:selected').each(function () {
    if ($(this).text() ==='2') {
      $('#sel2').show();
    }
    else if($(this).text() ==='1') {
      $('#sel2').hide();
    }
    else if($(this).text() ==='3') {
      $('#sel2').hide();
    }
  });
});

如果只有这样，这段代码就可以很好地工作：

if ($(this).text() ==='2') {
  $('#sel2').show();
}

是 JavaScript，但在添加 else if 语句时下降。显示选择框本身还是包含 div 标签会更好吗？第二个选择框不是选择选择的唯一原因是选择似乎不喜欢已经隐藏的元素（宽度问题）。

任何帮助，将不胜感激。

4

2 回答 2

1

我会让它更容易，从中获取value并连接selID：

$("#sel1").change(function() {
    $("select:not(#sel1)").hide(); //hide other selects, excluding #sel1
    $("#sel" + this.value).show();
});
于 2013-11-01T12:57:52.837 回答
1

您的$('option:selected')选择器正在查看所有 select元素的选项，而不仅仅是#sel1. 如此#sel2显示（由于在 中选择了“2” #sel1），然后立即隐藏（由于#sel2本身选择了“1”）。确保您只查看所需的值：

var selCategory = $('#sel1');

selCategory.change(function () {
  selCategory.find('option:selected').each(function () {
    if ($(this).text() =='2') {
      $('#sel2').show();
    }
    else {
      $('#sel2').hide();
    }
  });
});
于 2013-11-01T13:05:07.843 回答