亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

當用戶選擇特定選項時，如何使 div 出現？

當用戶選擇特定選項時，如何使 div 出現？

德瑪西亞99 2023-05-19 16:20:01
當單擊“其他”時，我試圖使文本區域字段出現在我的選項列表下方，但我無法使我的 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>
查看完整描述

3 回答

?
ABOUTYOU

TA貢獻1812條經驗 獲得超5個贊

無需傳入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>

試試這個讓我們看看它是否有效


查看完整回答
反對 回復 2023-05-19
?
慕萊塢森

TA貢獻1810條經驗 獲得超4個贊

我認為這就是您要找的東西。我做到了，當你選擇它時，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;

}


查看完整回答
反對 回復 2023-05-19
?
哈士奇WWW

TA貢獻1799條經驗 獲得超6個贊

首先，檢查您的 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>


查看完整回答
反對 回復 2023-05-19
  • 3 回答
  • 0 關注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號