Question

我有一个简单的“选择” - 显示如下。

<label>Best way to reach you?</label><br>
    <select id="contactMethod">
        <option value="wp">Work Phone?</option>
        <option value="cp">Personal Cell Phone?</option>
        <option value="email">Email?</option>
        <option value="Im">Instant Messanger?</option>
    </select>
<button onclick="showHidden()">Which way?</button>

我想要显示的对象是HTML，其中包含以下属性：

<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>

然后我有一个带有以下功能的.js文件。

function showHidden() {
    var dropSelection = document.getElementById("contactMethod").value;
    console.log(dropSelection)

    if(dropSelection == "email") {
        document.getElementById("email").style.display = "block";
    }
}

然后我在CSS中列出了ID，如下所示：

#email{ display:none; }

目标是在从上面的<select>中选择“电子邮件”选项时“显示”电子邮件文本框。

截至目前，我只是简单地打印所选内容，因此我可以肯定地知道我正在使用正确的值来运行if语句。话虽这么说，当我选择电子邮件选项时，它会立即闪烁电子邮件文本框，但会立即恢复为隐藏状态。

更新代码

<label>Best way to reach you?</label><br>
    <select onchange="showHidden()"  id="contactMethod">
        <option value="select">Select...</option>
        <option value="email">Email</option>
        <option value="phone">Work Phone</option>
        <option value="cPhone">Cell Phone</option>
        <option value="Im">Instant Messanger</option>
    </select>

可修改的字段

<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">

JS

function showHidden() {
    var dropSelection = document.getElementById("contactMethod").value;

    if(dropSelection == "email") {
        document.getElementById("email").style.display = "block";
        document.getElementById("emailLabel").style.display = "inline";
    }
    else if(dropSelection == "phone") {
        document.getElementById("phone").style.display = "block";
        document.getElementById("phoneLabel").style.display = "inline";
    }
    else if(dropSelection == "cPhone") {
        document.getElementById("cPhone").style.display = "block";
        document.getElementById("cPhoneLabel").style.display = "inline";
    }
    else if(dropSelection == "Im") {
        document.getElementById("Im").style.display = "block";
        document.getElementById("IMLabel").style.display = "inline";
    }   
}

Answer 1

＆＃13;

function showHidden(){
    var dropSelection = document.getElementById("contactMethod").value;
    console.log(dropSelection)

    if(dropSelection == "email"){
        document.getElementById("email").style.display = "block";
    }
}

＆＃13;

#email{
   display:none;
}

＆＃13;

<label>Best way to reach you?</label>
<br>
<select id="contactMethod">
  <option value="wp">Work Phone?</option>
  <option value="cp">Personal Cell Phone?</option>
  <option value="email">Email?</option>
  <option value="Im">Instant Messanger?</option>
</select>
<br>
<button onclick="showHidden()">Which way?</button>
<br>
<label>E-mail Adress:</label>
<br>
<input id="email" type="text" display="none">
<br>

＆＃13;

我没有看到任何问题，它运作正常。

无法通过Javascript

更新代码

可修改的字段

JS

1 个答案: