Select2 不创建名称属性答案

【问题标题】：Select2 does not create name attributeSelect2 不创建名称属性
【发布时间】：2013-04-22 23:53:12
【问题描述】：

使用 select2 jQuery 插件，我创建了一个标签框。因此我使用了以下html表单代码：

<form action="someAction" method="post">
    <fieldset>
        <select id="tags" multiple="" name="tags">
            <option value="tag1">val1</option>
            <option value="tag2">val2</option>
            <option value="tag3">val3</option>
        </select>
        <button type="submit" class="btn">Submit</button>
    </fieldset>
</form>

Select2 从中生成以下字段：

<input type="text" class="select2-input" autocomplete="off" id="s2id_autogen1" style="width: 10px;">

问题在于缺少name 属性。如果没有 name 属性，如何从 PHP 中的 $_POSTvariable 中获取输入字段的数据/文本？我该如何管理？

设置JS如下：

$(document).ready(function() {
$("#tags").select2({
    placeholder: "Insert tag",
    allowClear: true,
    minimumInputLength: 2,
    maximumSelectionSize: 1,
    minimumWidth: 200
});

});

【问题讨论】：

Select2 创建视觉体验元素。您使用的所有内容都保持不变。这意味着实际工作应该发生在原始元素上（在您的情况下，它是带有 name = 标签的元素）， Select2 创建的元素仅用于向您显示选定的选项，之后它将默默地修改目标元素。 TL;DR - 只需通过 $.serialize 序列化表单即可。
实际上它并没有改变目标元素（name=tags 这里）。我期待像<option value="tag1" selected="selected">val1</option> 这样的东西，但这并没有出现。我应该如何获得选定的？
好的，我发现不必有selected 属性。它现在可以工作了。

标签： php jquery post tags jquery-select2

【解决方案1】：

我确实用这个简单的 sn-p 解决了这个问题。

我添加了一个隐藏输入：

&lt;input type="hidden" id="manufacturer" name="manufacturer" value="1"&gt;

以及选择中的ID：

&lt;select class="full-width required" data-placeholder="Select Country" data-init-plugin="select2" required id='myselect'&gt;

然后只需在同一页面中添加那个简单的 JS 即可在每次用户更改值时更改隐藏值：

    <script type='text/javascript'>
    $(function() {
        $('#myselect').change(function() {
            // if changed to, for example, the last option, then
            // $(this).find('option:selected').text() == D
            // $(this).val() == 4
            // get whatever value you want into a variable
            var x = $(this).val();
            // and update the hidden input's value
            $('#manufacturer').val(x);
            alert("cambiado");
        });
    });
    </script>

【讨论】：

【解决方案2】：

我快速阅读了 select2 Github 帐户中的一些票证，其中一些人提到了这个问题。看来 select2 只是没有添加 name 属性。

您可以尝试在表单提交时通过JS动态添加一个，看看是否有效，

$('form').submit(function() {
    $('#s2id_autogen1').attr('name', 'whatever');
    return true;
});

或者您可以通过 ajax 提交表单并通过 ID 获取值并以这种方式发布

【讨论】：

【解决方案3】：

POST 需要 name 才能工作，但我注意到它有一个 id：

id="s2id_autogen1"

使用JS通过id抓取值并发布。

如果 id 不断变化，您可以使用该类：

HTML：

<form action="someAction" method="post">
<fieldset>
    <!-- This will contain the value from the generated input -->
    <input type = 'hidden' name = 'myField' id = 'myField' />
    <select id="tags" multiple="" name="tags">
        <option value="tag1">val1</option>
        <option value="tag2">val2</option>
        <option value="tag3">val3</option>
    </select>
    <button type="submit" class="btn">Submit</button>
</fieldset>

JS

$(document).ready(function(){
       $("#tags").select2({
       placeholder: "Insert tag",
       allowClear: true,
       minimumInputLength: 2,
       maximumSelectionSize: 1,
       minimumWidth: 200
});

//Make it so everytime the input with the class select2-input value is changed
//the value gets copied into the element with the id myField
$('input.select2-input').live('change', function(){
    $('input#myField').val($(this).val());
});

});

像这样提交表单将自动包含 POST 变量中的值。

【讨论】：

【解决方案4】：

经过大量阅读，我决定更改 select2.js 本身。

在第 2109 行将其更改为

this.focusser.attr("id", "s2id_"+this.select.context.id);

如果你的输入标签是这样的

<select id="fichier">

因此，您在列表中搜索的输入标签的 id 为 s2id_fichier_search

据我所知，不应该有冲突，这将允许您在同一页面上有多个 select2 并通过它们的事件运行您的函数，例如。

$(function() { 
  $('#s2id_fichier_search').keyup(function() {
    console.log('Be Practical')
  })
}

所以这会像你使用一样运行

<select id="fichier" onkeyup="console.log('Be Practical')">

【讨论】：

【解决方案5】：

这是一个老问题，但当前 select2 4.x.x 版本的正确答案是将 name 属性设置为数组

<select id="tags" multiple="" name="tags[]">

然后你可以像这样用 $_POST 得到数组：

$_POST['tags']

【讨论】：