jQuery自动填充多选使用文本而不是值答案

【问题标题】：jQuery Autopopulate Multiple Select uses text instead of valuejQuery自动填充多选使用文本而不是值
【发布时间】：2015-04-24 15:48:22
【问题描述】：

我有一个像这样配置为自动填充的多项选择：

     <select id="multiple-select-box" class="selectivity-input" data-placeholder="Type to search condos" multiple>     
            <option id="Alabama Grove Terrace" value="Alabama Grove"  >Alabama Grove Terrace</option>
            <option id="Alden Pines" value="Alden Pines"  >Alden</option>  
    </select>

选择后，我意识到脚本正在为每个选项提交可见文本，而不是为每个选择的选项提交 value=""。

我试图改变 var t=$(this).text();到 var t=$(this).value();认为这将获取值而不是选项文本，但结果相同。我错过了什么？

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

                        $("#bySub").submit(function(){
                            $(".selectivity-multiple-selected-item").each(function(){
                            var t=$(this).text();
                            //if()
                            $(".ml").append("<option selected='selected'>"+t+"</option>");
                        });

                        })

                $('#multiple-select-box').selectivity();


            });
        </script>

【问题讨论】：

$(this).val() 而不是 $(this).value()?
.text();更改为 .value();认为 value 是所选选择的选项 value=""。
在 jquery 中你必须使用 .val() 而不是完整的 .value() 来获取输入的 value 属性
有趣的是我试过了，提交后它不会转发值。

标签： javascript jquery

【解决方案1】：

好的，所以我去检查了您正在使用的这个选择性插件，它将您的select 转换为一系列divs

<div class="selectivity-results-container">
    <div class="selectivity-result-item highlight" data-item-id="Alabama Grove">Alabama Grove Terrace</div>
    <div class="selectivity-result-item" data-item-id="Alden Pines">Alden</div>
</div>

您必须更改您的 submit 函数以获取与原始 select value 对应的 data-item-id 属性

$("#bySub").submit(function(){
    $(".selectivity-multiple-selected-item").each(function(){
    var t=$(this).data("item-id");
    $(".ml").append("<option selected='selected'>"+t+"</option>");
});

编辑

fiddle example

【讨论】：

非常感谢您的帮助！

【解决方案2】：

在这一行中，您将选项附加到选择中，但您没有设置任何值属性：

 $(".ml").append("<option selected='selected'>"+t+"</option>");

【讨论】：

【解决方案3】：

如cmets中所说，jQuery中表单元素的“取值”方法是：

$(this).val()

您可能会将其与 JavaScript 属性混淆：

this.value

...这也有效。如果选择了某些内容并将其设置为“多个”，则两者都返回一个字符串数组

为了跟进您的评论，我没有看到您对所选元素的标记 class="ml" 因此几乎不可能调试为什么您的表单没有看到更大的图景而不提交值（即它可能在表单元素之外）。您可以尝试将 value 属性添加到 select 元素，但是 jQuery 应该能够通过使用文本值来选择缺少 value 属性的选定选项。

【讨论】：