$( document ).ready(function() {
return $("body").on("change",".creator_name_type", function(event){
if (event.target.value == 'Personal') {
$(this).siblings(".organization_name").hide();
$(this).siblings(".given_name").show();
$(this).siblings(".family_name").show();
} else {
$(this).siblings(".given_name").hide();
$(this).siblings(".family_name").hide();
$(this).siblings(".organization_name").show();
}
});
});
$(document).ready(function(){
return $("body").on("click", ".add_creator", function(event){
event.preventDefault();
var creatorClass = $(this).attr('data-addCreator');
var cloneUbiDiv = $(this).parent('div' + `${creatorClass}`).clone();
$(`${creatorClass}` + ':last').after(cloneUbiDiv);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="creator">
<select class="creator_name_type">
<option value="Personal">Personal</option>
<option value="Organisational">Organisational</option>
</select>
given name: <input type="text" name="gname" class="given_name"><br>
family name: <input type="text" name="fname" class="family_name"><br>
organization name: <input type="text" name="oname" class"organization_name"><br>
<a href="#" class=" add_creator" data-addCreator=".creator">Add another </a>
<div>
</body>
</html>
我试图根据所选选项选择性地显示表单输入。表单中有用于
添加更多
它只是克隆并将克隆的html附加到div的底部
添加更多
现在有两个select标记,一个选择值为“Personal”,另一个选择值为“organization”。它不是基于if/else语句有选择地显示表单字段,而是为两者显示相同的表单字段,同时为每个下拉选项保留不同的选择值,即一个下拉列表显示选定的个人,另一个显示组织。每次触发其中一个的onchange事件时,都会为这两个字段显示相同的表单字段,而不是基于if/else语句显示表单字段。
$( document ).ready(function() {
return $("body").on("change",".creator_name_type", function(event){
if (event.target.value == 'Personal') {
$(".organization_name").hide();
$(".given_name").show();
$(".family_name").show();
} else {
$(".given_name").hide();
$(".family_name").hide();
$(".organization_name").show();
}
});
});
