當用戶選擇特定選項時，如何使 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>