当用户选择特定选项时，如何使 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) {&nbsp; &nbsp; if (event.target.value == "other-title") {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("showOtherJobRole").style.display = "block";&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("showOtherJobRole").style.display = "none";&nbsp; &nbsp; }}和你的 html 这样<fieldset>&nbsp; <label for="title">Job Role</label>&nbsp; <select id="title" name="user-title" onchange="showOtherJobRole">&nbsp; &nbsp; <option value="" disabled="disabled" selected>--</option>&nbsp; &nbsp; <option value="full-stack js developer">Full Stack JavaScript Developer</option>&nbsp; &nbsp; <option value="front-end developer">Front End Developer</option>&nbsp; &nbsp; <option value="back-end developer">Back End Developer</option>&nbsp; &nbsp; <option value="designer">Designer</option>&nbsp; &nbsp; <option value="student">Student</option>&nbsp; &nbsp; <option value="other-title" id="other-title">Other</option>&nbsp; </select></fieldset><div id="showOtherJobRole" style="display: none">&nbsp; <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">&nbsp; &nbsp;<p>some content</p></div><select id="title" name="user-title">&nbsp; &nbsp; &nbsp; &nbsp; <option value="" disabled="disabled" selected>--</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="full-stack js developer">Full Stack JavaScript Developer</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="front-end developer">Front End Developer</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="back-end developer">Back End Developer</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="designer">Designer</option>&nbsp; &nbsp; &nbsp; &nbsp; <option value="student">Student</option>&nbsp; &nbsp; &nbsp; &nbsp; <option id="other-title">Other</option></select>我删除了您使用的 JS 代码，因为我认为这更适合您的需求。你必须自定义它。JavaScriptconst source = document.querySelector("#title");const target = document.querySelector("#showDiv");const displayWhenSelected = (source, value, target) => {&nbsp; &nbsp; const selectedIndex = source.selectedIndex;&nbsp; &nbsp; const isSelected = source[selectedIndex].value === value;&nbsp; &nbsp; target.classList[isSelected&nbsp; &nbsp; &nbsp; &nbsp; ? "add"&nbsp; &nbsp; &nbsp; &nbsp; : "remove"&nbsp; &nbsp; ]("show");};source.addEventListener("change", (evt) =>&nbsp; &nbsp; displayWhenSelected(source, "designer", target));CSS#showDiv {&nbsp; display: none;}#showDiv.show {&nbsp; display: block;}

Answer 3

首先，检查您的 HTML 部分。您没有“其他”选项的值属性。所以，添加一个值属性。其次，你不需要传递“this”。第三，您不需要为其他选项添加 id，因为您可以通过名为“title”的选择 id 来完成您的工作。所以，长话短说调用函数 onChange select。通过getElementById函数获取选中选项的值，比较其值是否等于“other-title”。如果是“other-title”，则显示 div 文本区域，否则不显示。function showOtherJobRole() {&nbsp; let nameOfJob = document.getElementById("title").value;&nbsp; if (nameOfJob === "other-title") {&nbsp; &nbsp; document.getElementById("showOtherJobRole").style.display = "block";&nbsp; } else {&nbsp; &nbsp; document.getElementById("showOtherJobRole").style.display = "none";&nbsp; }}<fieldset>&nbsp; <label for="title">Job Role</label>&nbsp; <select id="title" name="user-title" onchange="showOtherJobRole();">&nbsp; &nbsp; <option value="" disabled="disabled" selected>--</option>&nbsp; &nbsp; <option value="full-stack js developer">Full Stack JavaScript Developer</option>&nbsp; &nbsp; <option value="front-end developer">Front End Developer</option>&nbsp; &nbsp; <option value="back-end developer">Back End Developer</option>&nbsp; &nbsp; <option value="designer">Designer</option>&nbsp; &nbsp; <option value="student">Student</option>&nbsp; &nbsp; <option value="other-title">Other</option>&nbsp; </select></fieldset><div id="showOtherJobRole" style="display: none">&nbsp; <textarea name="otherJobText" id="otherJobText" cols="40" placeholder="Your Job Role" rows="4"></textarea></div>