当用户选择特定选项时，如何使 div 出现？

Question

当单击“其他”时，我试图使文本区域字段出现在我的选项列表下方，但我无法使我的 JS 函数工作。我究竟做错了什么？function showOtherJobRole(nameOfJob) {    if (nameOfJob == "other-title") {        const otherJobTitle = document.getElementById("other-title").value;            if (otherJobTitle == nameOfJob.value) {                document.getElementById("showOtherJobRole").style.display = "block";            } else {                document.getElementById("showOtherJobRole").style.display = "none";            }        }    else {        document.getElementById("showOtherJobRole").style.display = "none";    }}<fieldset>         <label for="title">Job Role</label>          <select id="title" name="user-title" onchange="showOtherJobRole(this);">            <option value="" disabled="disabled" selected>--</option>            <option value="full-stack js developer">Full Stack JavaScript Developer</option>            <option value="front-end developer">Front End Developer</option>            <option value="back-end developer">Back End Developer</option>            <option value="designer">Designer</option>                      <option value="student">Student</option>            <option id="other-title">Other</option>          </select>       </fieldset>      <div id="showOtherJobRole" style="display: none">        <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea>      </div>

Answer 1

无需传入thiseventHandler。一个event对象会自动传递给您的处理程序。您需要做的是捕获触发事件的元素的值。你的功能应该是这样的

function showOtherJobRole(event) {

    if (event.target.value == "other-title") {

        document.getElementById("showOtherJobRole").style.display = "block";

    }

    else {

        document.getElementById("showOtherJobRole").style.display = "none";

    }

}

和你的 html 这样

<fieldset>

  <label for="title">Job Role</label>

  <select id="title" name="user-title" onchange="showOtherJobRole">

    <option value="" disabled="disabled" selected>--</option>

    <option value="full-stack js developer">Full Stack JavaScript Developer</option>

    <option value="front-end developer">Front End Developer</option>

    <option value="back-end developer">Back End Developer</option>

    <option value="designer">Designer</option>

    <option value="student">Student</option>

    <option value="other-title" id="other-title">Other</option>

  </select>

</fieldset>

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

  <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea>

</div>

试试这个让我们看看它是否有效

Answer 2

我认为这就是您要找的东西。我做到了，当你选择它时，Designer它会显示带有 ID 的 div showDiv。

HTML

<div id="showDiv">

   <p>some content</p>

</div>

<select id="title" name="user-title">

        <option value="" disabled="disabled" selected>--</option>

        <option value="full-stack js developer">Full Stack JavaScript Developer</option>

        <option value="front-end developer">Front End Developer</option>

        <option value="back-end developer">Back End Developer</option>

        <option value="designer">Designer</option>

        <option value="student">Student</option>

        <option id="other-title">Other</option>

</select>

我删除了您使用的 JS 代码，因为我认为这更适合您的需求。你必须自定义它。

JavaScript

const source = document.querySelector("#title");

const target = document.querySelector("#showDiv");

const displayWhenSelected = (source, value, target) => {

    const selectedIndex = source.selectedIndex;

    const isSelected = source[selectedIndex].value === value;

    target.classList[isSelected

        ? "add"

        : "remove"

    ]("show");

};

source.addEventListener("change", (evt) =>

    displayWhenSelected(source, "designer", target)

);

CSS

#showDiv {

  display: none;

}

#showDiv.show {

  display: block;

}

Answer 3

首先，检查您的 HTML 部分。您没有“其他”选项的值属性。所以，添加一个值属性。其次，你不需要传递“this”。第三，您不需要为其他选项添加 id，因为您可以通过名为“title”的选择 id 来完成您的工作。所以，长话短说调用函数 onChange select。通过getElementById函数获取选中选项的值，比较其值是否等于“other-title”。如果是“other-title”，则显示 div 文本区域，否则不显示。

function showOtherJobRole() {

  let nameOfJob = document.getElementById("title").value;

  if (nameOfJob === "other-title") {

    document.getElementById("showOtherJobRole").style.display = "block";

  } else {

    document.getElementById("showOtherJobRole").style.display = "none";

  }

}

<fieldset>

  <label for="title">Job Role</label>

  <select id="title" name="user-title" onchange="showOtherJobRole();">

    <option value="" disabled="disabled" selected>--</option>

    <option value="full-stack js developer">Full Stack JavaScript Developer</option>

    <option value="front-end developer">Front End Developer</option>

    <option value="back-end developer">Back End Developer</option>

    <option value="designer">Designer</option>

    <option value="student">Student</option>

    <option value="other-title">Other</option>

  </select>

</fieldset>

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

  <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea>

</div>