Question

我有这个“Select2”下拉菜单，从ajax和php填充。我在这里的脚本有一个选择，并传递给一个html元素。现在我想将此代码与“标签”一起使用。我已经尝试但无法弄清楚如何获取所有选定的值？我如何发送选定的内容？

HTML

//form
<input type='hidden' class='col-md-4' id='choose_usr_email' name='choose_usr_email' required>
//Snap up whats chosed
<input type='text' id='chosen_usr_email' name='chosen_usr_email'>

的Javascript

$(document).ready(function(){
var chosenUsr = $('#choose_usr_email');
$("#choose_usr_email").select2({
    tags: true,
    placeholder: "Välj användare..",
    ajax: {
    url: "time.php",
    dataType: 'json',
        //search term
        data: function (term, page) {
            return {
            q: term, // search term
            page: page
            };
        },
        results: function (data, page) {
        return { results: data};
        }
    } // Ajax Call
}); // Select2

// Start Change
$(chosenUsr).change(function() {
    var usrId = $(chosenUsr).select2('data').id;
    var usrEmail = $(chosenUsr).select2('data').text;
    var timeNr = $(chosenUsr).select2('data').timenr;
    var usrfName = $(chosenUsr).select2('data').usrfname;

    $('#chosen_usr_id').val(usrId);
    $('#chosen_usr_email').val(usrEmail);
    $('#chosen_usr_time_nr').val(timeNr);
    $('#chosen_usr_fname').val(usrfName);

  }); //Change
}); //Document Ready

Answer 1

使用select2 v.4.0，您可以使用多个下拉列表。

将名称设置为choose_usr_email[]，以便在提交时创建标记数组。

<强> HTML

<form action="" id="tagForm">
    <select multiple="true" name="choose_usr_email[]" id="choose_usr_email" class="form-control select2">
        <!-- if tags are loaded over AJAX, no need for <option> elments -->
    </select>
    <!-- more form elements ... -->
    <button type="submit">Submit</button>
</form>

<强>脚本

$('#choose_usr_email').select2({
    tags: true,
    // automatically creates tag when user hit space or comma:
    tokenSeparators: [",", " "],
    ajax: {
        url: "time.php",
        dataType: 'json',
        //search term
        data: function (term, page) {
            return {
                q: term, // search term
                page: page
            };
        },
        results: function (data, page) {
            return { results: data};
        }
    }
});

// handle form submission:
$('#tagForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        // PHP file where you send selected values:
        url      : "file.php",
        // if you want to use $_POST in PHP, uncomment the line below:
        // type  : 'POST',
        dataType : 'json',
        // serialize the form:
        data     : $('#tagForm').serialize(),
        success  : function(response){
            // handle server response ...
        }
    });
});

PHP （您发送所选值的文件）

<?php

    // If 'type' is not specified in AJAX, use $_GET
    // check if 'choose_usr_email' exists in AJAX request
    if(isset($_GET['choose_usr_email']){
        // if exists, loop through the values:
        foreach($_GET['choose_usr_email'] as $key => $value){
            // do something with each $value (each submitted tag)
        }
    }

?>

DEMO

对于Select2＆lt; V.4.0

$('#choose_usr_email').val();会返回每个选定的标记 id （如果已指定）或 text ，以逗号（1,2,3，...）分隔。< / p>

$('#tagForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        // PHP file where you send selected values:
        url      : "file.php",
        // if you want to use $_POST in PHP, uncomment the line below:
        // type  : 'POST',
        dataType : 'json',
        // request data, split input field value by comma:
        data     : {
            choose_usr_email : $('#choose_usr_email').val().split(',')
        },
        success  : function(response){
            // handle server response ...
        }
    });
});

然后您可以像以前的PHP示例一样处理AJAX请求。

如何使用＆＃34;标签＆＃34;用Select2

1 个答案:

对于Select2＆lt; V.4.0