Javascript cascading drop-down menu and AJAX data validation core code_javascript skills

Although Prototype.js is also used to write, due to lack of understanding of it, the class implementation still uses the method in "JavaScript Advanced Programming". When using AJAX for data validation, XML was initially used as the data source. However, after using it for a period of time, it was found that XML was too inefficient, so JSON was used as the data source.

One year has passed, and the customer has put forward new requirements. Initially, it only required that the two data in the input box match. Now the requirement is that the data in the two drop-down menus must also match. So, I used this Opportunity to refactor the code.

Requirements:
1. According to the selection of product name and product packaging in the drop-down menu, the picture on the right should be changed accordingly.
2. After the product name, product packaging, production date, and production batch are all verified to be correct, the corresponding prompt will appear in the picture on the right.

Brief description:
Use Prototyp.js to complete the construction of classes, implement functions in an object-oriented way, event orientation makes the code clearer, and use AJAX state management to allow verification The process is more user-friendly, and the execution efficiency of JSON as a data source is also satisfactory.
Linkage Drop Down List And AJAX Validation
This JS script has special meaning for me.
I got a new start one year ago, the first task was to solve this linkage drop down list and data validation. At that time I had no deep understanding of Javascript. With my ability of study, after the reference to the code of colleague's, I finally finished it in several days.
Although I used Prototype.js to code, I still used the method in the to make up Class. In the process of AJAX validation, I used XML as data source at the beginning. After time past, I changed data source from XML to JSON for the low efficiency of XML.
Now the clients have new requirements, they need four data to be validated. So I rebuild the scripts.
Requirements:
1. change images of products with the change of product name and package.
2. after the validation with product name, package, date, batch, change images of products.
Brief:
Construct class with Prototype.js, use OOP's approach and event management to make a clear idea.
The management of AJAX status let the process be more friendly for customer. I'm also satisfied with the efficiency of JSON.
The code is as follows:

var ValidProduct = Class.create();
ValidProduct.prototype = {
initialize:function(prodData,validDataUrl,validData,prodType,prodPack,prodDate,prodPatch,prodImg,validBtn,validMsg) {
this.prodData = $H(prodData); //Product category data | product type data
this.validDataUrl = validDataUrl; //Validation data path | product data url
this.validData = validData; //Verification data | product data
this.prodType = $(prodType); //Product verification category | product type
this.prodPack = $(prodPack); //Product verification package | product package
this.prodDate = prodDate; //Product verification date ID | product date
this.prodPatch = prodPatch; //Product verification batch ID | product batch
this.prodImg = $(prodImg); //Product verification Pictures | product images
this.validBtn = $(validBtn); //Product verification button | validate button
this.validMsg = $(validMsg); //Product verification process prompts | validate message
this. init();
},
init:function(){//Program initialization | Application init
this.productTypeBind();
this.prodType.observe("change",this.productTypeChange .bind(this));
this.prodPack.observe("change",this.productPackChange.bind(this));
this.validBtn.observe("click",this.productValid.bind(this ));
},
productTypeBind:function(){//Binding product category drop-down list data | Binding product type data
this.prodPack.selectedIndex = 0; //for IE after page refreshed
var o = this.prodType;
this.prodData.each(function(pair){
o.options.add(new Option(pair.key, pair.value.code));
});
},
productTypeChange:function(e){//Product category drop-down list event listener | Eventlistener of product type
var o = this.prodPack;
o.length = 1;
o.selectedIndex = 0; //for IE after packing chosen the first
this.prodImg.writeAttribute("src",o[0].id);
var selected = this.prodType.selectedIndex ;
if (selected!=0){
this.productPackBind(this.prodType[selected].text);
}
},
productPackBind:function(choosedValue){// Binding product package drop-down list data | Binding product package data
var o = this.prodPack;
$H(this.prodData.get(choosedValue).type).each(function(pair){
var newOption = new Option(pair.key, pair.value.packing);
newOption.id = pair.value.img;
o.options.add(newOption);
});
},
productPackChange:function(e){//Product package drop-down list event listener | Eventlistener of product package
var o = this.prodPack;
this.prodImg.writeAttribute("src",o [o.selectedIndex].id);
},
productValid:function(){//Product validation | validate product
var v1 = $F(this.prodDate).strip(), v2 = $F(this.prodPatch).strip();
if(v1!=""&&v2!=""){
if(this.prodPack.selectedIndex != 0){
var validAjax = new Ajax.Request(this.validDataUrl,{
method:"get",
parameters:"rnd=" Math.random(),
onCreate: function(){
this.validMsg. show();
}.bind(this),
onComplete:this._validProd.bind(this)
});
}else{
alert("Please select product and packaging ! ");
}
}else{
alert("Please fill in the product production date and product batch number!");
}
},
_validProd:function(oReq) {//Product verification Ajax callback
this.validMsg.hide();
var v1 = this.prodType.getValue(), v2 = this.prodPack.getValue();
var v3 = $F (this.prodDate).strip(), v4 = $F(this.prodPatch).strip();
var imgUrl = this.prodPack[this.prodPack.selectedIndex].id;
//alert( v1 "n" v2 "n" v3 "n" v4 "n" imgUrl);
var prodBatchs = oreq.responseText.evalJSON()[this.validData];
var result=prodBatchs.any(function( a){
return (v3==a[1] && v4==a[0] && a[2].startsWith(v1) && v2==a[3]);
});
if(result){
this.prodImg.writeAttribute("src", imgUrl.split(".")[0] "-valid.jpg");
}else{
this. prodImg.writeAttribute("src", "images/invalid.jpg");
};
}
}
document.observe("dom:loaded",function(){
var validOne = new ValidProduct(prodTypeData,"data/batchs_new2.txt","batchs","productType",
"productPack","prodate","probatch","credit-img","vaSubmit"," ajaxsearch");
});