javascript - 如何更改脚本以适合下拉列表？

Question

我想问一下如何编写正确的代码，因为我有一个大学名称的下拉列表，如果没有用户的大学名称，他们可以点击另一个按钮，然后会出现一个表格或框，这样他们就可以输入他们的大学名称？

下面是我的代码；我尝试使用此 javascripts 但该框出现在下拉列表旁边这是JS

function yesnoCheck1() {
  if (document.getElementById('yesCheck1').checked) {
    document.getElementById('ifYes1').style.display = 'block';
  } else document.getElementById('ifYes1').style.display = 'none';
}

<div class="form=group">
  <label>University</label><br>

  <select name="university" class="form-control">

    <option value="">--select one--</option>
    <option disabled>
      <hr>
    </option>
    <option value="" style="font-weight:bold"><label>GENERAL UNIVERSITY</label> <br></option>
    <option disabled>
      <hr>
    </option>

    <option value="Universiti Kebangsaan Malaysia">Universiti Kebangsaan Malaysia </option>
    <option value="Universiti Malaya"> Universiti of Malaya</option>
    <option value="Univeristy of Malaysia Kelantan">University of Malaysia Kelantan </option>
    <option value="University of Malaysia Pahang">University of Malaysia Pahang </option>
    <option value="University of Malaysia Perlis">University of Malaysia Perlis</option>
    <option value="University of Malaysia Sarawak">University of Malaysia Sarawak </option>
    <option value="University of Malaysia Sabah">University Malaysia Sabah</option>
    <option value="Universiti Pertahanan Nasional Malaysia">Universiti Pertahanan Nasional Malaysia</option>
    <option value="Universiti Pendidikan Sultan Idris">Universiti Pendidikan Sultan Idris</option>
    <option value="Universiti Putra Malaysia">Universiti Putra Malaysia</option>
    <option value="Universiti Sains Malaysia">Universiti Sains Malaysia</option>
    <option value="Universiti Sains Islam Malaysia">Universiti Sains Islam Malaysia </option>
    <option value="Universiti Islam Antarabangsa Malaysia"> Universiti Islam Antarabangsa Malaysia</option>
    <option value="Universiti Sultan Zainal Abidin"> Universiti Sultan Zainal Abidin</option>
    <option value="Universiti Teknologi Malaysia">Universiti Teknologi Malaysia</option>
    <option value="University of Malaysia Terengganu">Universiti of Malaysia Terengganu</option>
    <option value="Universitu Tun Hussein Onn Malaysia">Universiti Tun Hussein Onn Malaysia</option>
    <option value="University Teknikal Malaysia Melaka">Universiti Teknikal Malaysia Melaka</option>
    <option value="Universiti Teknologi Malaysia">Universiti Teknologi Malaysia</option>
    <option value="Universiti Teknologi MARA">Universiti Teknologi MARA</option>
    <option value="Univesiti Utara Malaysia">Universiti Utara Malaysia</option>

    <option disabled>
      <hr>
    </option>
    <option value="" style="font-weight:bold">PRIVATE UNIVERSITY</label>
      </br>
    </option>
    <option disabled>
      <hr>
    </option>

    <option value="Al-Bukhary International University">Al-Bukhary International University</option>
    <option value="AIMST University"> AIMST University</option>
    <option value="Al-Madinah International University"> Al-Madinah International University</option>
    <option value="International Medical University"> International Medical University</option>
    <option value="INTI International University"> INTI International University</option>
    <option value="Limkokwing University of Creative Technology">Lilmkokwing University of Creative Technology</option>
    <option value="Malaysia University of Science and Technology">Malaysia University of Science and Technology</option>
    <option value="Management and Science University">Management and Science University</option>
    <option value="Multimedia University">Multimedia University</option>
    <option value="Open University Malaysia"> Open University Malaysia</option>
    <option value="Taylor's University"> Taylor's University</option>
    <option value="Universiti Teknologi Petronas Malaysia"> Universiti Teknolgi Petronas Malaysia</option>
    <option value="Universiti Tenaga Nasional"> Universiti Tenaga Nasional</option>
    <option value="Universiti Tun Abdul Razak">Universiti Tun Abdul Razak</option>
    <option value="Universiti Tunku Abdul Rahman"> Universiti Tunku Abdul Rahman</option>
    <option value="Universiti Kuala Lumpur">Univiersiti Kuala Lumpur</option>
    <option value="Universiti Industri Selangor">Universiti Industri Selangor</option>
    <option value="Universiti Sunway">Universiti Sunway</option>
    <option value="Wawasan Open University">Wawasan Open University</option>
    <option value="UCSI University"> UCSI University</option>

    <option disabled>
      <hr>
    </option>
    <option value="" style="font-weight:bold">OVERSEAS UNIVERSITY MALAYSIA'S CAMPUS</label>
      </br>
    </option>
    <option disabled>
      <hr>
    </option>

    <option value="Curtin Technology University">Curtin Technology University </option>
    <option value="Monash Malaysia University ">Monash Malaysia University</option>
    <option value="Swinburne Technology University">Swinburne Technology University</option>
    <option value="Nottingham University of Malaysia"> Nottingham University of Malaysia</option>
    <option value="Medical University of Newcastle, Malaysia"> Medical University of Newcastle, Malaysia</option>

    <option disabled>
      <hr>
    </option>
    <option value='' for="yesCheck1">Others..</option>
    <input type="radio1" onclick="javascript:yesnoCheck1();" name="yesno1" id="yesCheck">
  </select>
</div>

<div id="ifYes1" style="display:none">

  <div class="form-group">
    <input class="form-control" id="uname" name="uname" placeholder="Please write your Universirty"></input>
  </div>
</div>

这就是我的表单的外观，现在表单出现在我的下拉框旁边。我真的不知道如何改变它了。非常感谢每一个建议和帮助。

Answer 1

• 您的 HTML 标记无效。您不能使用 <hr>里面option .
• 您不能使用 <input>里面<select>
• 不要使用内联 CSS 和 Javascript
• </br>是无效标记。应该是<br>或最终 <br/>
• input是一个 Void 元素并且不以 </input> 结束
• 如果value匹配 <option> 文本，可以排除。
• 你应该使用<optgroup>用于分组。
• 创建 .none类风格与display: none;并将其设置为您的 #uni_other输入包装元素。
• 切换none选择更改事件的类:

var uni_select = document.querySelector("[name='university']");
var uni_other = document.getElementById("uni_other")

uni_select.addEventListener("change", function() {
  uni_other.classList.toggle("none", this.value !== "uni_other")
});

.none {
  display: none;
}

<div class="form=group">
  <label>University</label><br>

  <select name="university" class="form-control">

    <option value="">--select one--</option>

    <optgroup label="GENERAL UNIVERSITY">
      <option>Universiti Kebangsaan Malaysia </option>
      <option>Universiti of Malaya</option>
      <option>University of Malaysia Kelantan </option>
    </optgroup>

    <optgroup label="PRIVATE UNIVERSITY">
      <option>Al-Bukhary International University</option>
      <option>AIMST University</option>
      <option>Al-Madinah International University</option>
    </optgroup>

    <optgroup label="OVERSEAS UNIVERSITY MALAYSIA'S CAMPUS">
      <option>Al-Bukhary International University</option>
      <option>AIMST University</option>
      <option>Al-Madinah International University</option>
    </optgroup>

    <option value='uni_other'>Other&hellip;</option>
  </select>
</div>

<div class="form-group none" id="uni_other">
  <input class="form-control" name="uname" placeholder="Please write your Universirty">
</div>