Question

我想要做的是在页面加载时隐藏（）某些表单，并且根据用户从选项列表中选择的内容，用户可以填写表单。

受到这篇文章jQuery: How do i trigger event / do something when select option is selected?的启发，因此它应该是可行的。如果您知道如何

，那么在编程中，任何事情都是可行的

jQuery位：

$(document).ready(function() {
    $('#select').change(function() {
            while ($(this).val() == "--") {
                $("#form1").hide("fast");
                $("#form2").hide("fast");
                $("#form3").hide("fast");
                $("#form3a").hide("fast");
                $("#form4").hide("fast");
                $("#form5").hide("fast");
            }
            if ($(this).val() == "form1") {
                $("#form1").show();
                $("#form2").hide();
                $("#form3").hide();
                $("#form3a").hide();
                $("#form4").hide();
                $("#form5").hide();
            } else if ($(this).val() == "form2") {
                $("#form2").show();
                $("#form1").hide();
                $("#form3").hide();
                $("#form3a").hide();
                $("#form4").hide();
                $("#form5").hide();
            } else if ($(this).val() == "form3") {
                $("#form3").show();
                $("#form3a").show();
                $("#form2").hide();
                $("#form4").hide();
                $("#form5").hide();
                $("#form1").hide();
            } else if ($(this).val() == "form4") {
                $("#form4").show();
                $("#form2").hide();
                $("#form3").hide();
                $("#form3a").hide();
                $("#form4").hide();
                $("#form5").hide();
            }
        }

    });
});

html骨架看起来像这样：

<select class="select" name="randomName">
    <option value="--">--</option>
    <option value="form1">form1</option>
    <option value="form2">form2</option>
    <option value="form3">form3</option>
    <option value="form4">form4</option>
</select>

我可以把它隐藏起来但是出于某种原因，程序忽略了它应该再次出现并且一直显示它们的条件。

Answer 1

您当前的代码根本不起作用。您正在调用$('#select').change，它会查找您没有id select的元素，您的元素包含class select。

那就是说，下面的方法会简单得多。

基本上，

我们从用CSS隐藏的所有表单开始
然后，处理程序将侦听对select元素的更改
在更改时，它将隐藏所有表单
然后只显示id 以所选值开头的表单

备注：

此.replace(/(form\d+)[a-z]*$/,'$1')使用正则表达式删除表单编号后面的字母

此$('[id^=' + formId+']')选择以所选值开头的所有表单（减去我们删除的字母），这可确保选择form3或form3a将同时显示两种表单。

如果您有超过9个表单，即您达到form10，这将无效，我们需要更改方法，让我知道< / LI>

＆＃13;
＆＃13;
$('.select').change(function() { var formId = $(this).val().replace(/(form\d+)[a-z]*$/,'$1'); $('.forms').hide(); $('[id^=' + formId+']').show(); });
＆＃13;
.forms { display: none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="select" id="mySelect" name="randomName"> <option value="--">--</option> <option value="form1">form1</option> <option value="form2">form2</option> <option value="form3">form3</option> <option value="form3a">form3a</option> <option value="form4">form4</option> <option value="form5">form5</option> </select> <form action="" id="form1" class="forms"> <input type="text" placeholder="form1"> </form> <form action="" id="form2" class="forms"> <input type="text" placeholder="form2"> </form> <form action="" id="form3" class="forms"> <input type="text" placeholder="form3"> </form> <form action="" id="form3a" class="forms"> <input type="text" placeholder="form3a"> </form> <form action="" id="form4" class="forms"> <input type="text" placeholder="form4"> </form> <form action="" id="form5" class="forms"> <input type="text" placeholder="form5"> </form>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你好根据你的问题你可以试试下面的代码来显示或隐藏div你不需要写很多jQuery代码

  $('.select').on('change', function() {
   $("#form1").css('display', (this.value == 'form1') ? 'block' : 'none');
   $("#form2").css('display', (this.value == 'form2') ? 'block' : 'none');
   if ($(this).val() == "form3") {
     $("#form3").show();
     $("#form3a").show();
   } else {
     $("#form3").hide();
     $("#form3a").hide();
   }
   $("#form4").css('display', (this.value == 'form4') ? 'block' : 'none');
 });

看到小提琴 Fiddle Link

在select元素的change（）上操作DOM

2 个答案: