[英]How can I make a div appear when a user selects a specific option?
I'm trying to make a text area field appear below my list of options when "Other" is clicked, but I cannot get my JS function to work.我试图在单击“其他”时使文本区域字段出现在我的选项列表下方,但我无法让我的 JS 函数工作。
What am I doing wrong?我究竟做错了什么?
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>
I assume that this is what you're looking for.我假设这就是你要找的。 I made it that when you select
Designer
it will display the div with the showDiv
ID.我做到了,当您选择
Designer
,它将显示带有showDiv
ID 的 div。
HTML 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>
I removed the JS code that you were using as I think that this will fit better to your needs.我删除了您正在使用的 JS 代码,因为我认为这更适合您的需求。 You'll have to customize it tho.
你必须自定义它。
JavaScript 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 CSS
#showDiv {
display: none;
}
#showDiv.show {
display: block;
}
There's no need to pass this
in the eventHandler.不需要在 eventHandler 中传递
this
。 an event
object is automatically passed to your handler. event
对象会自动传递给您的处理程序。 What you need to do is capture the value of the element that triggered the event.您需要做的是捕获触发事件的元素的值。 Your function should look like this
你的函数应该是这样的
function showOtherJobRole(event) {
if (event.target.value == "other-title") {
document.getElementById("showOtherJobRole").style.display = "block";
}
else {
document.getElementById("showOtherJobRole").style.display = "none";
}
}
and your html like this和你的 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>
Try this let's see if it works试试这个让我们看看它是否有效
First, check your HTML portion.首先,检查您的 HTML 部分。 You have no value attribute for the "Other" option.
“其他”选项没有值属性。 So, add a value attribute.
所以,添加一个值属性。 Second, you do not need to pass "this".
其次,您不需要传递“this”。 Third, you do not need to add id for the other option because you can do your job by the select id named "title".
第三,您不需要为另一个选项添加 id,因为您可以通过名为“title”的选择 id 来完成您的工作。 So, long story short call the function onChange select.
因此,长话短说调用函数 onChange select。 Get the value of the selected option by getElementById function and compare its value equal to "other-title" or not.
通过 getElementById 函数获取所选选项的值,并比较其值是否等于“other-title”。 If it is "other-title", then show the div text area otherwise not.
如果是“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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.