Question

我试过这个：

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

});

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

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

我收到错误。我尝试过其他事情无济于事。如何获取所选文本？

Answer 1

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

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

Answer 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

Answer 3

您可以使用以下行获取文字：

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

ddlcontrol 来自：

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

希望它适合你！

Answer 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

Answer 5

这件事可以通过原型添加：

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;
        }
    });
};

Answer 6

您可以通过以下方式获取所选文 $（ '选择'）。selectize（{ onInitialize：function（selectize）{ selectize.on（'change'，function（value）{ var item = this。$ input [0]; var selected_text = $（item.selectize.getItem（value）[0]）。text（）; }）; } }

Answer 7

仅使用$('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()上添加的选项键。

示例

如果我有一个国家/地区列表，并且“美国”是当前选择的值，而“美国”是当前可见的文本，我将执行以下操作：

$('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)与$('element[id="someId"]')）。

Answer 8

获取所选值：selectize_obj.getValue()
检索所选文本：$(selectize_obj.getItem(value)).html()

Answer 9

这个技巧在使用单个项目 selectize 时对我有用：

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

如果您想从多值选择

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

使用选择性从选定内容中获取文本

9 个答案: