当用户选择特定选项时，如何使 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

我假设这就是你要找的。 我做到了，当您选择Designer ，它将显示带有showDiv ID 的 div。

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 2

不需要在 eventHandler 中传递this 。 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 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>