Question

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

下面是我的代码；我尝试使用此javascript，但是该框显示在下拉列表旁边这是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>

Answer 2

为您的<select>元素添加一个“更改”事件
更改后，读取所选值
根据值显示或隐藏输入字段。

const ifYes1 = document.getElementById("ifYes1")

const selectChanged = event => {

 let value = event.target.value;
 
 ifYes1.style.display = value==="other" ? "block" : "none";
 
 /* Same thing as :
   if(value==="other"){
      ifYes1.style.display = "block";
   } else {
      ifYes1.style.display = "none";
   }
 */ 
}

#ifYes1{
    display : none;
    margin-top : 20px;
}

<div class="form=group">
  <label>University</label><br>

  <select onchange="selectChanged(event)">
    <option value="swinburne">Swinburne Technology University</option>
    <option value="nottingham">Nottingham University of Malaysia</option>
    <option value="newcastle">Medical University of Newcastle, Malaysia</option>
    <option disabled></option>
    <option value='other'>Other..</option>
  </select>
</div>

<div id="ifYes1">
  <div class="form-group">
    <input id="uname" placeholder="Please write your University"/>
  </div>
</div>

Answer 3

您的HTML格式无效。

没有类型为“ radio1”的HTML对象，
没有名为yesCheck1的对象，因此页面上没有任何内容 “已检查”
由于<hr/>不是有效的选项文本，所以对标签使用OPTGROUP
您不能具有输入字段，也不能在<br>内进行选择

为什么不对其他选择选项做出反应？

document.querySelector("[name=university]").onchange = function() {
  document.getElementById("ifYes1").style.display = this.value == "others" ? "block" : "none"; // or use class and classList
}

// jQuery very similar

// $("[name=university]").on("change",function() {
//   $("#ifYes1").toggle(this.value=="others);
// });

.bold { font-weight:bold }

<div class="form=group">
  <label>University</label><br>

  <select name="university" class="form-control">

    <option value="">--select one--</option>
    <option value="" disabled></option>
    <optgroup label="GENERAL UNIVERSITY">
      <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>
    </optgroup>
    <option value="" disabled></option>

    <optgroup label="PRIVATE UNIVERSITY">
      <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>
    </optgroup>
    <option value="" disabled></option>

    <optgroup label="OVERSEAS UNIVERSITY MALAYSIA'S CAMPUS">
      <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>
    </optgroup>
    <option value="" disabled></option>
    <option value='others' class="bold">Others…</option>
  </select>
</div><br/>

<div id="ifYes1" style="display:none">

  <div class="form-group">
    <input class="form-control" id="uname" name="uname" placeholder="Please write your Universirty" />
  </div>
</div>

如何更改脚本使其适合下拉列表？

3 个答案: