的JQuery / JavaScript的

Question

我有下拉框列表并有一些表格。我想显示特定表格对下拉框值。假设下拉框包含两个列表，例如：（i）Man（ii）Animal。当选择Man选项时，它会进入一个包含两个选项男性和女性的形式。另一方面（对于动物）它进入一个包含三个选项狮子，老虎，牛的形式。如何在html和javascripts代码中编写这个语句???

Answer 1

这很简单，你可以用几行jquery做到这一点，你只需要绑定一个select on onchange事件来隐藏每个表单类型，然后根据select＆＃39;来显示正确的表单。新的价值。

以下是此工作的一个示例：

https://codepen.io/jcapinc/pen/YrJobM

的JQuery / JavaScript的

$(function(){
  var hidestuff = function(){
    $(".man-form,.animal-form").hide();
  }

  $("select[name='formtype']").change(function(){
    hidestuff();

    var value = $(this).val();
    if(value == "man"){
      $(".man-form").show();
    }
    if(value == "animal"){
      $(".animal-form").show();
    }
  });
  hidestuff();
});

HTML

<div class="container">
  <div class="col-md-offset-3 col-md-6">
    <form>
      <h1>Creature Form</h1>
      <div class="form-group">
        <label for="formtype">Choose Creature Type</label>
        <select class="form-control" name="formtype">
          <option value="">- Choose - </option>
          <option value="man">Man</option>
          <option value="animal">Animal</option>
        </select>
      </div>
      <div class="man-form">
        <div class="form-group">
          <label for="manstuff">Man Stuff</label>
          <input class="form-control" type="text"/>
        </div>
      </div>
      <div class="animal-form">
        <div class="form-group">
          <label for="animalstuff">Animal Stuff</label>
          <input class="form-control" type="text"/>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 2

使用此示例：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <select id="formSelector">
        <option value="0">select form type</option>
        <option value="humanForm">human</option>
        <option value="animalForm">animal</option>
    </select>
    <div id="humanForm" style="display:none;">
        <input type="radio" name="humanSelector" />Man
        <input type="radio" name="humanSelector" />Woman
    </div>
    <div id="animalForm" style="display:none;">

        <input type="radio" name="animalSelector" />cat
        <input type="radio" name="animalSelector" />dog
        <input type="radio" name="animalSelector" />lion
    </div>
    <script>
        var formSelector = document.getElementById("formSelector");
        var humanForm = document.getElementById("humanForm");
        var animalForm = document.getElementById("animalForm");

        formSelector.addEventListener("change", function (event) {
            humanForm.style.display = "none";
            animalForm.style.display = "none";

            switch (formSelector.value) {
                case "humanForm":
                    humanForm.style.display = "block";

                    break;
                case "animalForm":
                    animalForm.style.display = "block";
                    break;
            }
        });
    </script>
</body>
</html>

Answer 3

我认为这是两个选择，但我看到你想显示/隐藏一个表单，在这种情况下，我建议Jeffrey's answer。

第一个选择和第二个选择之间需要有一些关系。一种方法是添加一个名为data-relation的属性，该属性连接两个选择。在任何change上，将更新选择。您需要添加初始显示和仅显示非隐藏选项等内容，但我会留给您。

＆＃13;

var cat = document.getElementsByTagName('select')[0];
var opt = document.getElementsByTagName('select')[1];

cat.addEventListener('change', function(s) {
  for (var i = 0; i < opt.options.length; i++)
    opt.options[i].hidden = opt.options[i].dataset.relation !== s.target.value;
});

＆＃13;

<select>
<option>man</option>
<option>animal</option>
</select>

<select>
<option data-relation=man>male</option>
<option data-relation=man>female</option>
<option data-relation=animal>lions</option>
<option data-relation=animal>tigers</option>
<option data-relation=animal>cow</option>
</select>

＆＃13;

从另一个下拉框中选择一个选项后显示一个特定的下拉框

3 个答案:

的JQuery / JavaScript的

HTML