选择时显示新表单选择器

Question

我已经多次尝试让第二个输入表单只在做出正确选择时显示，仍然会以任何一种方式显示。我是js的新手，不确定我做错了什么。

由于我是html的新手，这可能与我的id有关。我对js完全陌生，但我使用过dart，它看起来很相似，但我就是找不到问题所在。

​

$("#job-type").change(function(){
 if ($(this).val() == "internals-civil") {
  $('#telecom-internal-civil').show();
  $('#internal-civil').attr('required');
  $('#internal-civil').attr('data-error');
 } else {
  $('#telecom-internal-civil').hide();
  $('#internal-civil').removeAttr('required');
  $('#internal-civil').removeAttr('data-error');
 }
});
$("#job-type").trigger("change");

<div class="form-body">
            <div class="contact-labels">
              <label for="job-type">Job Type</label>
            </div>
            <div>
              <select name="job-type" id="job-type" required>
                <option value="" disabled selected value selected
                  >Select one</option
                >
                <option value="internals-civil"
                  >Telecom Internals & Civil</option
                >
                <option value="fencing">Fencing</option>
              </select>
            </div>
          </div>

          <div class="form-body form-body-telecom" id="telecom-internal-civil">
            <div class="contact-labels">
              <label for="internal-civil">Job Type</label>
            </div>
            <div>
              <select name="#" id="internal-civil">
                <option value="" disabled selected value selected
                  >Select one</option
                >
                <option value="#">Blah</option>
                <option value="#">Flah</option>
              </select>
            </div>
          </div>

​

Answer 1

它是jquery而不是js，您没有包含

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

工作示例：

​

$("#job-type").change(function(){
 if ($(this).val() == "internals-civil") {
  $('#telecom-internal-civil').show();
  $('#internal-civil').attr('required');
  $('#internal-civil').attr('data-error');
 } else {
  $('#telecom-internal-civil').hide();
  $('#internal-civil').removeAttr('required');
  $('#internal-civil').removeAttr('data-error');
 }
});
$("#job-type").trigger("change");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-body">
            <div class="contact-labels">
              <label for="job-type">Job Type</label>
            </div>
            <div>
              <select name="job-type" id="job-type" required>
                <option value="" disabled selected value selected
                  >Select one</option
                >
                <option value="internals-civil"
                  >Telecom Internals & Civil</option
                >
                <option value="fencing">Fencing</option>
              </select>
            </div>
          </div>

          <div class="form-body form-body-telecom" id="telecom-internal-civil">
            <div class="contact-labels">
              <label for="internal-civil">Job Type</label>
            </div>
            <div>
              <select name="#" id="internal-civil">
                <option value="" disabled selected value selected
                  >Select one</option
                >
                <option value="#">Blah</option>
                <option value="#">Flah</option>
              </select>
            </div>
          </div>

​