当用户选择特定选项时，如何显示div？

问题描述

当我单击“其他”时，我试图使文本区域字段显示在我的选项列表下方，但是我无法使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>

解决方法

我认为这就是您要寻找的。 我认为，当您选择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;
}

,

无需在事件处理程序中传递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>

尝试一下，看看它是否有效

,

首先，检查您的HTML部分。您没有“其他”选项的值属性。因此，添加一个value属性。其次，您不需要传递“ this”。第三，您不需要为另一个选项添加ID，因为您可以通过选择名为“ title”的ID来完成工作。因此，长话短说调用onChange函数。通过getElementById函数获取所选选项的值，并比较其值是否等于“ 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>