Javascript 如何用新的输入值验证输入框(存在于Div容器中)的值?
我有两个属性为multiple as的下拉列表,如果我选择第一个下拉列表,那么我将在第二个下拉列表中添加Javascript 如何用新的输入值验证输入框(存在于Div容器中)的值?,javascript,jquery,Javascript,Jquery,我有两个属性为multiple as的下拉列表,如果我选择第一个下拉列表,那么我将在第二个下拉列表中添加输入类型复选框。但若我选择第一行并再次取消选择,我将在第二个框中获得重复的选项 这是我的代码片段 $('.search box')。打开(“更改”,函数(e){ var inputVal1=$(this.val(); $('#复选框输入:选中')。每个(函数(){ $(“#txtSelectedVal”).val($(“#txtSelectedVal”).val()+$(this.attr(
输入类型复选框
。但若我选择第一行并再次取消选择,我将在第二个框中获得重复的选项
这是我的代码片段
$('.search box')。打开(“更改”,函数(e){
var inputVal1=$(this.val();
$('#复选框输入:选中')。每个(函数(){
$(“#txtSelectedVal”).val($(“#txtSelectedVal”).val()+$(this.attr('value')+“,”);
});
var inputVal=(inputVal1)=null?0:inputVal1;
if(输入值长度){
$.get(“sub_category.php”,{term:inputVal}).done(函数(数据){
var lclObj=JSON.parse(数据);
//$(“#复选框”).empty();
对于(var i=0;i”);
}
$(“#复选框:复选框”)。每个(函数(){
变量子类别=
$(“.txtselectedvaluessubfromtegory1”).html();
变量数组=子类别拆分(“,”);
$。每个(数组、函数(i){
$(“输入[type=checkbox[value=”+array[i]+“]]”)prop('checked',true);
});
});
});
}
});
类别:*
1.
2.
3.
子类别:
选择一个选项
下面是一个小例子,说明了如何做到这一点
有一些步骤:
- 声明一个数组变量,该变量将在单击复选框时更新eahc(
此处)checkedCheckboxes
- 当下拉列表的值更改时执行AJAX调用
- AJAX结束后,您将获得类别。删除所有已存在的复选框,然后通过循环为每个类别创建一个新的复选框。不要忘记检查
是否包含当前循环的类别,以便在需要时重新检查。checkedCheckboxes
- 将事件侦听器添加到这些复选框中,这些复选框将更新
checkedCheckbox
//下面是保持选中复选框的变量。
设checkedCheckboxes=[];
$('#multiple')。在('change',function()上{
常量值=$(this.val();
//模拟AJAX调用。
设类别=[];
值。forEach((值)=>{
//避免在每次迭代时进行另一个循环和推进。
categories=[].concat(categories,getCategories(value));
});
//^^^模拟AJAX调用完成。
//清空复选框容器。
$(“#复选框”).empty();
//对于每个获得的类别。。。
类别。forEach((cat)=>{
//创建一个复选框。
常量复选框=$(“”)
.attr('type','checkbox')
.val(cat);
//如果该类别已被选中,
//然后再检查一遍。
如果(选中复选框。包括(类别)){
复选框.prop('checked',true);
}
//单击复选框。。。
复选框。在('更改',单击复选框);
//将复选框附加到DOM。
$(“#复选框”).append(复选框,cat);
});
});
//添加或删除相关变量中的复选框
//是否已检查。
函数handleOnClickCheckbox(){
常量值=$(this.val(),
isChecked=$(this).is(':checked');
//请记住已选中该复选框。
如果(已选中&&!已选中复选框。包括(值)){
选中复选框。推送(值);
}//如果取消选中,则删除该复选框。
如果(!isChecked&&checked复选框。包括(值)){
选中复选框。拼接(选中复选框。索引(值),1);
}
}
//模拟ajax。
函数getCategories(id){
常数猫={
“1”:[1-A”,“1-B'],
“2”:[2-A'],
‘3’:[‘3-A’、‘3-B’、‘3-C’]
};
返回猫[id];
}
第一类
第2类
第3类
您可以将选中的复选框保存在一个数组中。然后,当您重置这些复选框时,请在该数组中选中选中的复选框。检查它们。检查您的答案尽可能实际。@Kévin Bibollet我已更新为您的建议,但这只会影响任何建议的一行。我在您的脚本,但我在您的HTML中找不到它。然后,您将复选框附加到DOM,但它们都具有相同的[id]
属性,但id必须是唯一的。(这不是它不起作用的原因,但您需要知道)兄弟,你能编辑我的问题吗?我无法得到你的答案。目前我不能,因为你的帖子中缺少信息。什么是#txtSelectedVal
?你从AJAX中得到了什么数据结构?也许你应该在搜索过程中更清楚。现在我已经更新了,问题是如果我选择再次选择第一个下拉列表时的3个复选框我比以前选择的复选框少了一个我用你的代码的更正版本编辑了我的帖子。我无法测试它,因此如果出现问题或你不理解,请告诉我。(因为我仍然不知道什么是#txtSelectedVal
和。txtselectedvaluesSBFromCategory1
,我没有在我的代码片段中使用它们)谢谢你的帮助,我现在明白了,问题是从我完成修剪和使用开始,第一个元素就有空白。