ajaxform select2 concatenate multiple IDs

问题

I have a select2 search form with an ajaxform that concatenates new form entries into the original select2 search form. If more than one new entry is added, the new text values concatenate correctly into the search field, however, any new hidden ID replaces the existing one. It appears to be added because all new text values shows in the select2 search field. I think the issue is that the new ID should be concatenating to the hidden cropstageid field in addition to the text field concatenating to the search field. I'm not sure how to do this. Your help is appreciated.

<script>
$(document).ready(function() { 

$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});

$('#btnSubmit').on('click', function() {

$.ajax({
    asynch : true,
    type : 'POST',
    dataType : 'json',
    url: '../cfc/stages.cfc?method=addstage&returnformat=json',
    //all form fields submitted to url
    data: $("form").serialize(),

    success : function(data, textStatus) {
        //close the modal
        $('#stagemodal').modal('hide');

        //set the returned data to a variable
        var fullname = $('#stagename').val();
        $("#cropstageid").val(data.DATA);

        //get current selection
        var selection = $(search).select2("data");
        //add a new item to the selection
        selection.push({id: data.DATA, text: fullname})
        //set the updated selection
        $(search).select2("data",selection);

        //reset form
        $('#addstageform')[0].reset();
        //output data to console
        console.log(data.DATA);

}
});
});

});
</script>


<cfform name="stageform" id="stageform" action="settings_form_action.cfm" method="post" ENCTYPE="multipart/form-data">

<h4 class="text-primary">Select Crop Stages</h4>
<input type="hidden" id="cropstageid" name="cropstageid">

<cfselect id="search" multiple name="cropstageid" >
<cfloop query="stages" >
<option value="#cropstageid#" >#stage#</option>
</cfloop>

</cfform>

*AjaxForm for new entries

<cfform id="addstageform" name="addstageform" action="" method="post">
<input type="text" name="stagename" id="stagename" autofocus size="35">
<input type="button" id="btnSubmit" value="Add" /><
</cfform>

回答1:

Thanks to the help of a colleague, the solution is below:

in success we are no longer attaching to a hidden field, so remove $("#cropstageid").val(data.DATA);
in success, add $('#search').append('' + fullname + ''); this line adds another select option from the newly added ajaxform record
no longer need hidden value since it is attaching as the select option, so delete hidden cropstageid form field inside the form.

The cleaned up script is below:

<script>
$(document).ready(function() { 

$("#search").select2({
width: '60%',
allowClear: true,
minimumInputLength: 0
});

$('#btnSubmit').on('click', function() {

$.ajax({
asynch : true,
type : 'POST',
dataType : 'json',
url: '../cfc/stages.cfc?method=addstage&returnformat=json',
//all form fields submitted to url
data: $("form").serialize(),

success : function(data, textStatus) {
//close the modal
$('#stagemodal').modal('hide');
//set the returned data to a variable
var fullname = $('#stagename').val();
//get current selection
var selection = $('#search').select2("data");
//add the new option to the select 
$('#search').append('<option value="' + data.DATA + '">' + fullname +    '</option>');
//add a new item to the selection array
selection.push({
id: data.DATA, 
text: fullname
});
//set the updated selection
$('#search').select2("data",selection);
//reset the modal form
$('#addstageform')[0].reset();
//output to the console
console.log(data.DATA);
}

});
});

});
</script>

来源：https://stackoverflow.com/questions/35561229/ajaxform-select2-concatenate-multiple-ids

标签

concatenation

ajaxform

select2