第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

當(dāng)用戶選擇特定選項(xiàng)時(shí)，如何使 div 出現(xiàn)？

當(dāng)用戶選擇特定選項(xiàng)時(shí)，如何使 div 出現(xiàn)？

德瑪西亞99 2023-05-19 16:20:01
當(dāng)單擊“其他”時(shí)，我試圖使文本區(qū)域字段出現(xiàn)在我的選項(xiàng)列表下方，但我無法使我的 JS 函數(shù)工作。我究竟做錯(cuò)了什么？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貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊

無需傳入thiseventHandler。一個(gè)event對(duì)象會(huì)自動(dòng)傳遞給您的處理程序。您需要做的是捕獲觸發(fā)事件的元素的值。你的功能應(yīng)該是這樣的


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>

試試這個(gè)讓我們看看它是否有效


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
慕萊塢森

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

我認(rèn)為這就是您要找的東西。我做到了，當(dāng)你選擇它時(shí)，Designer它會(huì)顯示帶有 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 代碼，因?yàn)槲艺J(rèn)為這更適合您的需求。你必須自定義它。


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;

}


查看完整回答
反對(duì) 回復(fù) 2023-05-19
?
哈士奇WWW

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊

首先，檢查您的 HTML 部分。您沒有“其他”選項(xiàng)的值屬性。所以，添加一個(gè)值屬性。其次，你不需要傳遞“this”。第三，您不需要為其他選項(xiàng)添加 id，因?yàn)槟梢酝ㄟ^名為“title”的選擇 id 來完成您的工作。所以，長(zhǎng)話短說調(diào)用函數(shù) onChange select。通過getElementById函數(shù)獲取選中選項(xiàng)的值，比較其值是否等于“other-title”。如果是“other-title”，則顯示 div 文本區(qū)域，否則不顯示。


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>


查看完整回答
反對(duì) 回復(fù) 2023-05-19
  • 3 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)