显示隐藏字段或使用ajax发出新请求? [英] Show hidden field or neew request with ajax?

问题描述

我需要在网站的表单中插入一些输入字段.

I need insert some input fields into a form on a website.

将插入这些字段，具体取决于用户在< select> 输入中选择的选项.

These fields will be inserted depending on the option that the user chooses in a <select> input.

正确的方法是什么?

使用ajax的新请求添加这些字段，或者只是隐藏所有可能的字段，并根据所选选项显示它们?

A new request with ajax to add these fields, or simply keep all possible fields hidden, and show them according to the chosen option?

(我不会向数据库发出任何请求)

(I will not make any requests to a database)

推荐答案

Ajax用于与服务器对话".如果仅是更改< select> 值并显示/隐藏某些字段的情况，则使用 style ='display:none;'和通过更改样式显示/隐藏它们，例如，可以使用jquery:

Ajax is for "talking" to the server. If it's just a case of change a <select> value and show/hide some fields, then put them on the page with style='display:none;' and show/hide them by changing that style, eg with jquery you can use:

 $(selector).show();

一些示例代码(当然，有很多方法可以做到这一点，这是一种):

Some example code (there are, of course, many ways to do this, here's one):

$("#picker").on("change", function() {
  $(".dogs,.cats").hide();
  $("." + $(this).val()).show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Do you like:
<select id='picker'>
  <option value=''>please select</option>
  <option value='dogs'>dogs</option>
  <option value='cats'>cats</option>
</select>
<div class='dogs' style='display:none;'>
  which sort of dog:
  <select>
    <option>big</option>
    <option>sloppy</option>
    <option>yappy</option>
  </select>
</div>
<div class='cats' style='display:none;'>
  what type of cat:
  <select>
    <option>aloof</option>
    <option>independent</option>
    <option>house cat</option>
  </select>
</div>

这篇关于显示隐藏字段或使用ajax发出新请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！