在js中动态添加表单字段依赖
[英]Add dynamically form fields dependencies in js
问题描述
I am developing an app in Django.
我正在 Django 中开发一个应用程序。 In my forms it is possible to have dependent fields.在我的 forms 中，可能有依赖字段。 I would like to use this plugin.我想使用这个插件。 However, field dependencies may vary depending on the user's choices.但是，字段相关性可能会根据用户的选择而有所不同。 The fields in my forms look more or less like this:我的 forms 中的字段或多或少是这样的：
<input type="text" name="name1" data-dependency="id_name2" class="textinput textInput form-control" id="id_name1">
The data-dependency attribute indicates which fields this field depends on. data-dependency属性表示该字段依赖于哪些字段。 So in this case the name1 field will somehow depend on the name2 field.所以在这种情况下， name1字段将以某种方式依赖于name2字段。
I wrote this sample script to dynamically add dependencies:我编写了这个示例脚本来动态添加依赖项：
$('document').ready(function(){
var name = document.getElementById("id_name1");
var data_dependency = name.getAttribute('data-dependency');
var dependencies = data_dependency.split(";")
var i =0;
for(i=0; i<dependencies.length; i++){
var d = dependencies[i];
var elem = document.getElementById(d);
$(name).dependsOn({
'#id_name2' : {
values: ['yes']
}
});
}
});
At this point, I have a fixed id #id_name2 on which depends field name1 .此时，我有一个固定的 id #id_name2取决于字段name1 。 Is there any way to pass on any element taken from the dependencies?有没有办法传递从依赖项中获取的任何元素？
A simple working example (you only need to download two scripts):一个简单的工作示例（您只需要下载两个脚本）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dependsOn.min.js"></script>
<script>
$('document').ready(function(){
var element = document.getElementById("myText2");
var data_dependency = element.getAttribute('data-dependency');
var dependencies = data_dependency.split(";")
var i =0;
for(i=0; i<dependencies.length; i++){
var d = dependencies[i];
var tmp = document.getElementById(d);
$(element).dependsOn({
'#myText1' : {
values: ['yes']
}
});
}
});
</script>
</head>
<body>
<form id="myForm">
<label for="myText1">Type yes</label>
<input type="type" id="myText1">
<label for="myText2">Input</label>
<input type="text" id="myText2" value="" data-dependency="myText1">
</form>
</body>
</html>
1 个解决方案
解决方案1
0 2020-12-18 12:12:33
The key to solving the problem was to know that dependsOn accepts the dictionary as an argument.解决问题的关键是要知道dependsOn 接受字典作为参数。
It is enough to create a suitable dictionary and pass it on as an argument.创建一个合适的字典并将其作为参数传递就足够了。
So the solution is:所以解决方案是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="dependsOn.min.js"></script>
<script>
function get_id(element) {
return '#' + element.id;
};
$('document').ready(function(){
var element = document.getElementById("myText2");
var data_dependency = element.getAttribute('data-dependency');
var dependencies = data_dependency.split(";")
var i =0;
for(i=0; i<dependencies.length; i++){
var d = dependencies[i];
var tmp = document.getElementById(d);
var data = {}
data[get_id(tmp)] = {values: ['yes'] }
$(element).dependsOn(data);
}
});
</script>
</head>
<body>
<form id="myForm">
<label for="myText1">Type yes</label>
<input type="type" id="myText1">
<label for="myText2">Input</label>
<input type="text" id="myText2" value="" data-dependency="myText1">
</form>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.