使用 selectize 从选定内容中获取文本答案

【问题标题】：Get Text From Selected using selectize使用 selectize 从选定内容中获取文本
【发布时间】：2014-09-25 06:25:20
【问题描述】：

我试过了：

var eventHandler = function() {
    return function() {
        console.log($select.val());
    };
};
var $select = $('.selectize').selectize({
    create          : true,
    onChange        : eventHandler()

});

这让我得到了所选选项的值，但我需要文本。当我这样做时：

console.log($select.val().text());

我得到一个错误。我尝试了其他方法无济于事。如何获取选中的文本？

【问题讨论】：

标签： jquery selectize.js

【解决方案1】：

select_option.getItem(select_option.getValue())[0].innerHTML; select_option = $select_option[0].selectize; 获取指定下拉选项的文本值。

this.getItem(value)[0].innerHTML 获取当前下拉选项的文本值

【讨论】：

【解决方案2】：

最简单的方法是使用onChange 事件并从所选选项中获取文本

JS：

$(function(){
$('#select').selectize({
					create: true,
					sortField: {
						field: 'text',
						direction: 'asc'
					},
					onChange:function(value){
					 $(".log").append("Value:" + value + "<br />");
      $(".log").append("Text:" +$("#select option:selected").text() + "<br />");
					},
					dropdownParent: 'body'
				});
});

<link rel="stylesheet" type="text/css" href="https://selectize.github.io/selectize.js/css/styles.css">
<link rel="stylesheet" type="text/css" href="https://selectize.github.io/selectize.js/css/selectize.default.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="https://selectize.github.io/selectize.js/js/selectize.js"></script>


<select id="select" class="control-form" data-placeholder="Select a person...">
<option value="">None</option>
<option value="4">Thomas Edison</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
<div class="log"></div>

Demo Here

【讨论】：

这仅适用于单选列表而不是多选。

【解决方案3】：

您可以通过以下方式获取所选文本：

$('select').selectize({
         onInitialize: function (selectize) {
            selectize.on('change', function (value) {
                 var item = this.$input[0];
                 var selected_text = $(item.selectize.getItem(value)[0]).text();
              });
        }
 }

【讨论】：

【解决方案4】：

所以我得到了它的工作。这该死的kludgey，必须有更好的方法。有一个方法getValue()，但没有对应的getText() 方法。

var eventHandler = function() {
    return function() {
        var something = selectizeControl.getItem(selectizeControl.getValue());
        console.log(something.text());
    };
};

var $select = $('.selectize').selectize({
    create          : true,
    onChange        : eventHandler()

});
var selectizeControl = $select[0].selectize

【讨论】：

可以多选吗

【解决方案5】：

你可以用这一行得到文本：

ddlcontrol[0].selectize.getItem(ddlcontrol[0].selectize.getValue()).text();

ddlcontrol 来自哪里：

var ddlcontrol = $('#ddCountry').selectize({
 valueField: 'id',
 labelField: 'name',
 searchField:['name']
});

希望它对你有用！

【讨论】：

【解决方案6】：

这个东西可以通过原型添加：

Selectize.prototype.getText = function () {
    return this.getItem(this.getValue()).text();
};

如果有人需要方法setText（如相应的方法setValue），可以这样添加：

Selectize.prototype.setText = function (text) {
    var selectize = this;
    $.each(this.options, function (propertyName, propertyValue) {
        if (propertyValue[selectize.settings.labelField] === text) {
            selectize.setValue(propertyName);
            return false;
        }
    });
};

【讨论】：

【解决方案7】：

正在检索选定的值：selectize_obj.getValue()
检索选定的文本：$(selectize_obj.getItem(value)).html()

【讨论】：

【解决方案8】：

只需使用 $('select[class*="selectize"] option') 对我有用。我使用了*=，因为我经常在元素上一次使用多个类（more on jQuery selectors/wildcards at w3schools.com）。否则，如果使用 id 或 name，我将分别使用 $('select[id="selectize-id"] option') 或 $('select[name="selectize-name"] option')。

然后，为了获得选项值，我添加了.text() 并获得了选项键，我添加了.val()。

示例

如果我有一个国家列表并且“usa”是当前选择的值，而“United States”是当前可查看的文本，我会执行以下操作：

$('select[class*="selectize"] option').val() 返回“美国”
$('select[class*="selectize"] option').text() 返回“美国”

可能的替代方案

仅使用基本的 id 选择器（如$('#selectize-id option')）不起作用。然而，使用基本类选择器——如$('.selectize-class option')——似乎确实有效（more on attribute selectors on w3schools.com）。也许有人可以评论导致这种情况的两者之间的区别（$('#someId) vs $('element[id="someId"]')）。

【讨论】：

【解决方案9】：

当我使用 single item selectize:

时，这个技巧对我有用

var selectedText_ = "";
var val_ = $("#mySelect")[0].selectize.items[0]; // get first value
if (val_)
    selectedText_ = $("span[data-value=" + val_  + "] div").text(); // get text

如果你想从 multi-value selectize

中选择所有文本，可以使用循环操作上面的代码

【讨论】：