Question

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

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标签会更好吗？第二个选择框不是选择选择的唯一原因是所选择的选项似乎不喜欢已隐藏的元素（宽度问题）。

任何帮助都将不胜感激。

Answer 1

我会更容易，抓住value并连接sel ID：

$("#sel1").change(function() {
    $("select:not(#sel1)").hide(); //hide other selects, excluding #sel1
    $("#sel" + this.value).show();
});

Answer 2

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

var selCategory = $('#sel1');

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

使用javascript /显示和隐藏选择框

HTML：

JS：

2 个答案: