ajaxform select2连接多个ID [英] ajaxform select2 concatenate multiple IDs

问题描述

我有一个带有ajaxform的select2搜索表单，该表单将新表单条目连接到原始的select2搜索表单中.如果添加了多个新条目，则新文本值将正确连接到搜索字段中，但是，任何新的隐藏ID都会替换现有的ID.由于所有新的文本值都显示在select2搜索字段中，因此似乎已添加了它.我认为问题在于，除了文本字段与搜索字段的连接之外，新ID还应与隐藏的cropstageid字段进行连接.我不确定该怎么做.感谢您的帮助.

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用于新条目

*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>

推荐答案

在同事的帮助下，解决方法如下:

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

1. 成功后，我们将不再附加到隐藏字段，因此请删除 $(#cropstageid").val(data.DATA);
2. 成功添加 $('#search').append(''+全名+''); 该行从新添加的ajaxform记录中添加另一个选择选项
3. 由于它已附加为选择选项，因此不再需要隐藏值，因此请删除表单内的隐藏cropstageid表单字段.

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

清理脚本如下:

<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>

这篇关于ajaxform select2连接多个ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！