Question

你好我尝试创建一个选择，然后选择一些页面显示另一个选择。我是javascript的新手，所以我不知道什么是坏的... 我的问题是，当我在选择中选择项目时，不会显示div＃sub1，＃sub2，＃sub3，＃sub4

$('#cat').change(function() {
  if ($(this).val() == '1') {
    $("#sub1").show();
  } else if ($(this).val() == '2') {
    $("#sub2").show();
  } else if ($(this).val() == '3') {
    $("#sub3").show();
  } else if ($(this).val() == '4') {
    $("#sub4").show();
  }
});

<select name="cat" id="cat" class="form-control form-group" required>
  <option selected>Pasirinkite kategoriją</option>
  <option value="1">Žaidimų</option>
  <option value="2">Verslo</option>
  <option value="3">Fotografijų</option>
  <option value="4">Kiti dizainai</option>
  <option value="5">WEB reikmenys</option>
  <option value="6">Grafika</option>
  <option value="7">HTML</option>
  <option value="8">Mokami dizainai</option>
  <option value="9">Kiti .PSD</option>
</select>
<div id="sub1" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">League of Legends</option>
    <option value="2">Counter Strike</option>
    <option value="3">Lineage 2</option>';
    <option value="4">Minecraft</option>
    <option value="5">GTA</option>
  </select>
</div>
<div id="sub2" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Mygtukai</option>
    <option value="2">Ikonos</option>
    <option value="3">Stiliai</option>';
    <option value="4">Užsklandos</option>
    <option value="5">Kita</option>
  </select>
</div>
<div id="sub3" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Teptukai</option>
    <option value="2">Gradientai</option>
    <option value="3">Teksto efektai</option>';
    <option value="4">Vectorai</option>
  </select>
</div>
<div id="sub4" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Iliustracijos</option>
    <option value="2">Infografika</option>
    <option value="3">Kortelės</option>';
    <option value="4">Siluetai</option>
    <option value="5">Logotipai</option>
  </select>
</div>

Answer 1

您需要将其包装在加载事件

中

但它可以大大简化

$(function() {
  $('#cat').change(function() {
    $("div[id^='sub']").hide();
    $("#sub"+$(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="cat" id="cat" class="form-control form-group" required>
  <option selected>Pasirinkite kategoriją</option>
  <option value="1">Žaidimų</option>
  <option value="2">Verslo</option>
  <option value="3">Fotografijų</option>
  <option value="4">Kiti dizainai</option>
  <option value="5">WEB reikmenys</option>
  <option value="6">Grafika</option>
  <option value="7">HTML</option>
  <option value="8">Mokami dizainai</option>
  <option value="9">Kiti .PSD</option>
</select>
<div id="sub1" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">League of Legends</option>
    <option value="2">Counter Strike</option>
    <option value="3">Lineage 2</option>';
    <option value="4">Minecraft</option>
    <option value="5">GTA</option>
  </select>
</div>
<div id="sub2" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Mygtukai</option>
    <option value="2">Ikonos</option>
    <option value="3">Stiliai</option>';
    <option value="4">Užsklandos</option>
    <option value="5">Kita</option>
  </select>
</div>
<div id="sub3" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Teptukai</option>
    <option value="2">Gradientai</option>
    <option value="3">Teksto efektai</option>';
    <option value="4">Vectorai</option>
  </select>
</div>
<div id="sub4" style="display: none;">
  <select name="sub" class="form-control form-group" required>
    <option selected>Pasirinkite sub-kategoriją</option>
    <option value="1">Iliustracijos</option>
    <option value="2">Infografika</option>
    <option value="3">Kortelės</option>';
    <option value="4">Siluetai</option>
    <option value="5">Logotipai</option>
  </select>
</div>

根据所选内容输入字段

1 个答案: