Javascript 需要根据另一个字段的结果显示表单字段

Javascript 需要根据另一个字段的结果显示表单字段,javascript,html,css,Javascript,Html,Css,这里需要帮助 我有一个包含多个输入字段的表单的HTML页面 其中一个字段是具有多个值的下拉框,是“其他”选项之一 这里我需要做的是,如果用户选择了其他选项,就会显示一个输入文本框 总之,我需要一个函数,如果选择该值,它将显示隐藏的表单字段。 这需要在提交之前完成,所以使用onexit()或类似的方法 我一直在寻找,但我找不到一个方法 任何帮助都将不胜感激 谢谢各位: <!doctype html> <html lang="en"> <head

这里需要帮助

我有一个包含多个输入字段的表单的HTML页面

其中一个字段是具有多个值的下拉框,是“其他”选项之一

这里我需要做的是,如果用户选择了其他选项,就会显示一个输入文本框

总之,我需要一个函数,如果选择该值,它将显示隐藏的表单字段。 这需要在提交之前完成,所以使用onexit()或类似的方法

我一直在寻找,但我找不到一个方法

任何帮助都将不胜感激

谢谢各位:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/owl.carousel.min.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- Style -->
    <link rel="stylesheet" href="css/style.css">

    <title>Pedido de Assistência Técnica</title>
  </head>
  <body>
    <script>
      function validateForm() {
        var x = document.forms["brat"]["Marca"].value;
        var y = document.forms["brat"]["outram"].value;
        if (x == "" && y=="") {
          alert("Necessita de seleccionar uma marca");
          return false;
        }
      }
      </script>


  <div class="d-lg-flex half">
    <div class="bg order-1 order-md-2" style="background-image: url('images/bgbr.jpg');"></div>
    <div class="contents order-2 order-md-1">

      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-7 py-5">
            <h3>Pedido de Assistência</h3>
            <p class="mb-4">Por favor preencha o formulário com os dados correctos.</p>
            <form action="#" method="post" name="brat" onsubmit="return validateForm()">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group first">
                    <label for="fname">Nome</label>
                    <input type="text" class="form-control" placeholder="Nome" id="fname">
                  </div>    
                </div>
                <div class="col-md-12">
                  <div class="form-group first">
                    <label for="fmorada">Morada</label>
                    <input type="text" class="form-control" placeholder="Morada" id="fmorada">
                  </div>    
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group first">
                    <label for="lemail">Email</label>
                    <input type="text" class="form-control" placeholder="xxxx@xxxxx.xx" id="lemail">
                  </div>    
                </div>
                <div class="col-md-6">
                  <div class="form-group first">
                    <label for="ltelefone">Telefone</label>
                    <input type="text" class="form-control" placeholder="9xxxxxxxx" id="ltelefone">
                  </div>    
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
              
                  <div class="form-group first">
                    <label for="codpostal">Cod.Postal</label>
                    <input type="text" class="form-control" placeholder="XXXX-XXX" id="codpostal">
                  </div>
                </div>
                <div class="col-md-6">
              
                  <div class="form-group first">
                    <label for="localidade">Localidade</label>
                    <input type="text" class="form-control" placeholder="Localidade" id="localidade">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
              
                  <div class="form-group first">
                    <label for="NIF">NIF</label>
                    <input type="text" class="form-control" placeholder="Nif" id="NIF">
                  </div>
                </div>
                <div class="col-md-6">
              
                  <div class="form-group first">
                    <label for="obs">Observações</label>
                    <input type="text" class="form-control" placeholder="Observações" id="obs">
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
              
                  <div class="form-group first">
                    <label for="marca">Marca</label>
                    <select name="Marca" class="form-control" id="Marca">
                      <option value="" selected>Selecione uma marca</option>
                      <option value="ALBATROSS">ALBATROSS</option>
                      <option value="BERING">BERING</option>
                      <option value="BOSS">BOSS</option>
                      <option value="CERTINA">CERTINA</option>
                      <option value="CK">CK</option>
                      <option value="ELETTA">ELETTA</option>
                      <option value="GUCCI">GUCCI</option>
                      <option value="HAMILTON">HAMILTON</option>
                      <option value="LACOSTE">LACOSTE</option>
                      <option value="LONGINES">LONGINES</option>
                      <option value="OMEGA">OMEGA</option>
                      <option value="PIERRE BALMAIN">PIERRE BALMAIN</option>
                      <option value="RADO">RADO</option>
                      <option value="SCUDERIA FERRARI">SCUDERIA FERRARI</option>
                      <option value="TECHNOMARINE">TECHNOMARINE</option>
                      <option value="TECHNOSPORT">TECHNOSPORT</option>
                      <option value="TISSOT">TISSOT</option>
                      <option value="TOMMY HILFIGER">TOMMY HILFIGER</option>
                      <option value="ZENO">ZENO</option>
                      <option value="OUTRAS">Outras</option>
                  </select> 
          
                  </div>
                </div><br>
                <div class="col-md-6">
                  <div class="form-group last mb-3">
                    <label for="outram">Outras Marcas</label>
                    <input type="text" class="form-control" placeholder="Outra Marca" id="outram" name="outram">
                  </div>
                </div>
              </div>
              
              <div class="d-flex mb-5 mt-4 align-items-center">
                <div class="d-flex align-items-center">
                <label class="control control--checkbox mb-0"><span class="caption">Ao solicitar a assistência está a concordar com os&nbsp; <a href="https://boutiquedosrelogios.pt/termos-condicoes" target="_new">Termos e Condições.</a></span>
                  <input type="checkbox" name="termos" required/>
                  <div class="control__indicator"></div>
                </label>
              </div>
              </div>

              <input type="submit" value="Solicitar Assistência" class="btn px-5 btn-primary">

            </form>
          </div>
        </div>
      </div>
    </div>

    
  </div>
    
    

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

佩迪多·德阿塞尼亚·特尼卡酒店
函数validateForm(){
var x=document.forms[“brat”][“Marca”].value;
var y=文件.forms[“brat”][“outram”]值;
如果(x==“”&&y==“”){
警觉(“乌玛马尔卡地区选择的必要性”);
返回false;
}
}
佩迪多·德阿塞尼亚酒店

赞成预先制定格式,并修改护墙板

诺姆 莫拉达 电子邮件 电传 邮政编码 地方性 NIF 观察者 马卡 乌马马卡Selecione 信天翁 白令 老板 塞蒂纳 CK 埃莱塔 古奇 汉密尔顿 拉科斯特 浪琴 欧米茄 皮埃尔·巴尔曼 拉多 法拉利车队 科技海洋 科技运动 天梭 汤米·希尔费格 芝诺 奥特拉斯
奥特拉斯马卡斯酒店 请求协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式协和式飞机
根据下拉列表中选择的值更改-元素的CSS属性
显示

document.querySelector(“下拉菜单”).addEventListener(“更改”,函数(e){
const other=document.querySelector(“其他”);
如果(如:目标值==“其他”){
other.style.display=“block”;
}否则{
other.style.display=“无”;
}
});
#其他{
显示:无;
}

1.
2.
3.
其他


您能否添加一些代码,说明您是如何实现这一目标的。嗨,Priyesha,谢谢您的回答。这就是问题所在,我没有这方面的代码,因为我无法做到这一点,也无法找到如何做到这一点。该页面有一个简单的表单验证JS,但这不是我所需要的,我将尝试发布到目前为止的代码。我想它回答了你的问题,问题解决了,谢谢你的帮助