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 タグを表示する方がよいでしょうか? 2 番目の選択ボックスが選択済み選択ではない唯一の理由は、選択済みが既に非表示になっている要素を好まないように見えるためです (幅の問題)。

どんな助けでも大歓迎です。

4

2 に答える 2

1

私はそれをより簡単にし、それからIDを取得しvalueて連結します：sel

$("#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')のオプションを見ています。Soが表示され ( で "2" が選択されているため)、すぐに非表示になります (それ自体で "1" が選択されているため)。必要な値だけを見ていることを確認してください。 select#sel1#sel2#sel1#sel2

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 に答える