时间戳

首页 > 解决方案 > 使用 Javascript 使某些字段根据下拉值消失

javascript - 使用 Javascript 使某些字段根据下拉值消失

问题描述

我目前正在学习 Javascript 的初学者课程。我大约一周前才开始编码，并得到提示使用我目前所知道的从表单等中获取数据。

我遇到了一个障碍，教练告诉我必须自己解决，但是……我已经坚持了好几个小时，只是浏览了材料并试图在互联网上搜索答案！我知道我必须使用onchange，但我完全迷失了其余部分。在这个阶段我已经尽力了，但我真的很感激一些帮助！对不起超级初学者/超长问题！

对于提示，我得到了一个表格并告诉我重新创建它。整理完所有 HTML 后，我必须：

  1. 确保一切从没有价值开始。
  2. 确保重置按钮有效。
  3. 在“性别”类别中选择“男性”时，会隐藏“舞蹈”、“旅行”和“摄影”的“爱好”行。“soccer”和“futsal”行的背景颜色变为蓝色。
  4. 在“性别”类别中选择“女性”时，“足球”和“五人制足球”线被隐藏，“舞蹈”、“旅行”、“摄影”线的背景颜色变为黄色。
  5. 在“性别”类别中选择“空白”时，应显示“爱好”两行，背景颜色应为白色。

注意：我认为我的 HTML 没有正确显示“爱好”的行，但它应该是：
- 足球 - 五人制足球 -
舞蹈 - 旅行 - 摄影

<style>
  h1 {
    text-align: center;
  }

  .pink {
    background-color: pink;
  } 

  body {
    border: 2px;
  }

</style>

<script>
  function clr() {
    var t1 = document.info.lfname.value="";
    var t2 = document.info.gender.value="";
    var t3 = document.info.hobby.value="";
   }


<p>Last name (Chinese)：&lt;/p>
<form name="info">
  <input type="text" name="lfname">

First name (Chinese)： 
  <input type="text" name="lfname"><br>

<p>Last name (alphabet)：&lt;/p>

  <input type="text" name="lfname">

First name (alphabet)：
  <input type="text" name="lfname"><br><br>

Gender：

<select name="gender" onchange="hide()">
<option value=""></option>
<option value="man">Male</option>
<option value="woman">Female</option><br>
</select>

<p>Hobbies:</p>

  <input type="checkbox" name="hobby" value="soccer">Soccer
  <input type="checkbox" name="hobby" value="futsal">Futsal
  <input type="checkbox" name="hobby" value="dance">Dance
  <input type="checkbox" name="hobby" value="travel">Travel
  <input type="checkbox" name="hobby" value="photo">Photography<br><br><br>

  <input type="reset" class="pink" value="Reset" onclick="clr()">
  <input type="submit" class="pink" value="Submit">

</form>

标签： javascripthtml

解决方案

正如我所看到的，大多数答案都给了你一些提示，这对你来说是理想的，因为你应该自己做作业，所以我试图通过给你一个工作示例来进一步推动它，我会评论每一行让你理解的代码，但请记住，我将使用一些JavaScript需要深入研究JavaScript语言以便更熟悉的高级东西，而且你真的必须自己搜索方法/属性的方式这将使用工作，首先，最重要的是，获得更多关于这种语言的知识，其次，当他们可能会问这些东西是做什么的时，为你的老师的问题提供答案。

抱歉有点咄咄逼人，这里有一个关于如何完成工作的演示。

// select the dropdown, male and female hobbies sections based on the IDs that we already gave to each one.
var gender = document.getElementById('gender'),
maleHobbies = document.getElementById('male-hobbies'),
femaleHobbies = document.getElementById('female-hobbies');

// adding change event listener to the dropdown.
gender.addEventListener('change', function() {
  if(this.value === 'man') {
/**
* when 'Male' is selected on the dropdown(based on the value of the relevant checkbox):
*     1. add 'hidden' class to the female hobbies section to hide it.
*     2. remove the 'hidden' class from the male hobbies section to show it if it was hidden.
      3. add the 'blue' class from the male hobbies section.
**/
femaleHobbies.classList.add('hidden');
maleHobbies.classList.remove('hidden');
maleHobbies.classList.add('blue');
  } else if(this.value === 'woman') {
/**
* when 'Female' is selected on the dropdown(based on the value of the relevant checkbox):
*     1. add 'hidden' class to the male hobbies section to hide it.
*     2. remove the 'hidden' class from the female hobbies section to show it if it was hidden.
      3. add the 'yellow' class from the female hobbies section.
**/
maleHobbies.classList.add('hidden');
femaleHobbies.classList.remove('hidden');
femaleHobbies.classList.add('yellow');
  } else {
/**
* when the empty option is selected:
*     remove the 'hidden' class from both the male and female hobbies sections.
*     remove the 'blue' and 'yellow' classes from the male and female hobbies sections respectively.
**/
maleHobbies.classList.remove('blue', 'hidden');
femaleHobbies.classList.remove('yellow', 'hidden');
  }
});
.pink {
  background-color: pink;
}
/* 'hidden' class is used to hide an element by giving it a 'display' property of 'none'. */
.hidden {
  display: none;
}
/* 'blue' class is used to make the male hobbies section background as blue */
.blue {
  background-color: blue;
}
/* 'blue' class is used to make the female hobbies section background as yellow */
.yellow {
  background-color: yellow;
}
<!--
  I made some changes to your HTML:
- surrounded each checkbox inputs in a label tag with for attribute pointing to the corresponding input, soand you can click the text and the checkbox will check/uncheck.
- Added an ID to each checkbox input
- surrounded the corresponding checkboxes in a div, thus making row for male hobbies and row for female hobbies, each row(div tag) has a unique ID.
-->
<p>Last name (Chinese)：&lt;/p>
<form name="info">
  <input type="text" name="lfname" />
First name (Chinese)： 
  <input type="text" name="lfname" /><br>
<p>Last name (alphabet)：&lt;/p>
  <input type="text" name="lfname" />
First name (alphabet)：
  <input type="text" name="lfname" /><br><br>
Gender：
<select name="gender" id="gender">
  <option value=""></option>
  <option value="man">Male</option>
  <option value="woman">Female</option>
</select>
<p>Hobbies:</p>
  <div id="male-hobbies">
  <label for="soccer"><input type="checkbox" name="hobby" id="soccer" value="soccer" />Soccer</label>
  <label for="futsal"><input type="checkbox" name="hobby" id="futsal" value="futsal" />Futsal</label>
  </div>
  <div id="female-hobbies">
  <label for="dance"><input type="checkbox" name="hobby" id="dance" value="dance" />Dance</label>
  <label for="travel"><input type="checkbox" name="hobby" id="travel" value="travel" />Travel</label>
  <label for="photography"><input type="checkbox" name="hobby" id="photography" value="photo" />Photography</label>
  </div>
  <input type="reset" class="pink" value="Reset" />
  <input type="submit" class="pink" value="Submit" />
</form>

给你的一些提示：

  • 您不需要创建一个函数来重置每个输入字段，因为input[type="reset"](input类型为reset) 将为您完成。

  • 为了使我的演示为您工作，您必须：将JavaScript代码粘贴到script标签中并将其放在script之前</body>，或者您可以将其粘贴到单独的文件中，然后包含它并再次将script具有的标签放入src文件中（之前有带扩展名的JavaScript代码） 。.js</body>

这里有一些有用的链接可能（确实会）帮助你：

了解更多关于getElementById方法的信息。

了解更多关于addEventListener方法的信息。

详细了解classList属性及其方法（add等remove）。

希望我把你推得更远。

推荐阅读