Question

我有一个表单，根据用户的选择，输入元素是否可见。实际上，用户正在以另一种形式设置定义类型的合作伙伴，如果选择了允许在该类合作伙伴上显示的元素

类型1会显示这些元素：

<input type="text" id="partner" name="partner" class="span12" value="<?= $partner->partner;?>" />
<input type="text" id="address" name="address" class="span12" value="<?= $partner->address;?>" />
<input type="text" id="phone" name="phone" class="span12" value="<?= $partner->phone;?>" />

类型2将具有可见元素：

<input type="text" id="partner" name="partner" class="span12" value="<?= $partner->partner;?>" />
<input type="text" id="country" name="country" class="span12" value="<?= $partner->country;?>" />
<input type="text" id="markname" name="markname" class="span12" value="<?= $partner->markname;?>" />

类型3应该全部拥有它们。

合作伙伴表单将以这样的选择框开头：

<select>
    <option>Type 1</option>
    <option>Type 2</option>
    <option>Type 3</option>
</select>

用户可以定义新的视觉类型，因此合作伙伴页面必须是动态的。页面将仅显示选择框开始，选择后将显示所选类型允许的元素。

我知道它必须由ajax完成，但我现在不知道如何将它们保存在同一页面并刷新内容而不刷新页面

Answer 1

 $("select").on("change", function(){ 
    $.ajax({ 
        type: "post", 
        url: "/link-to-post-to", 
        data: $("select").val(), 
        success: function(data){ 
            //append to page here 
        }, 
        error: function(xhr, status, error){ 
            console.log(error) 
        } 
    }); 
 });

所以php容器会打印出html，然后在jquery中将它添加到页面中。

选择后显示输入元素

1 个答案: