我使用jquery使用autocompete组合框有问题。在这里,我动态添加新的组合框。有一个添加按钮功能可以动态添加组合框。
我的自动完成功能在所有组合框中工作正常,但问题是每当我在任何组合框上触发事件时,操作都会发生在最后一个组合框中。组合框索引存在问题。我已经在函数setDamagedVehicle(status)中编写了widget代码,这样我就可以跟踪每个组合框但它不起作用。每当我点击添加按钮时,函数setDamagedVehicle(status)被调用并且工作正常但juery代码仅在最后一个状态值上执行。请帮我跟踪每个组合框。我无法在隐藏变量中保存正确的值。我在这里使用struts框架。
<script language="JavaScript" type="text/javascript">
function setDamagedVehicle(status){
//Here I have written the at widget code so that I can track each and every combobox using the status value.
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
// some statements
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
var selectedObject = ui.item.value;
var selectedObjectCode = ui.item.option.value;
$( "#vehicleObjectCodeText-"+status ).val(selectedObjectCode);
$( "#objectValueText-"+status ).val(selectedObject.trim());
var selectBox = document.getElementById('claimObjectCombo-'+status);
// saving selected item in form through hidden selectedIndexText field
for(var i = 0, j = selectBox.options.length; i < j; ++i) {
if(selectBox.options[i].innerHTML === selectedObject) {
$( "#selectedIndexText-"+status).val(i);
break;
}
}
},
});
}, /* _createAutocomplete close */
_createShowAllButton: function() {
// fine
},
_source: function( request, response ) {
//fine
},
_destroy: function() {
// fine
}
}); /* widget close */
})( jQuery ); /* function close */
}
$(function() {
$( ".objectComboBox" ).combobox();
});
</script>
<logic:iterate collection="${claimNotificationForm.vehicles}" id="vehicle" property="vehicles" indexId="vehicleIndex">
<td class="tiivis">
<div class="ui-widget">
<!-- hidden element with vehicleObjectValue is set to save selected vehicle code before form submit -->
<html:hidden property="vehicleObjectValue[${vehicleIndex}]" styleId="objectValueText-${vehicleIndex}"/>
<!-- hidden element with selectedIndex is set to save selected vehicle index before form submit -->
<html:hidden property="selectedIndex[${vehicleIndex}]" styleId="selectedIndexText-${vehicleIndex}"/>
<html:hidden property="vehicleObject[${vehicleIndex}]" styleId="vehicleObjectCodeText-${vehicleIndex}"/>
<html:select property="vehicleObject[${vehicleIndex}]" styleId="claimObjectCombo-${vehicleIndex}" styleClass="objectComboBox" onkeypress="enterStopper(event);">
<!-- values are getting from other system and this is working fine -->
<vehicles:optionsCollection property="objectTypes" sort="true" chooseKey="000" chooseResourceKey="page.claim.search.object.name"/>
</html:select>
</div>
</td>
<script language="JavaScript" type="text/javascript">
setDamagedVehicle(${vehicleIndex});
</script>
</logic:iterate>