我使用jquery选择的插件

时间:2015-02-13 08:28:15

标签: jquery jquery-chosen

从下拉列表中我只想要一些部分(例如,AL_Alabhama意味着我只想要AL)。我使用split函数执行此操作。当我从下拉列表中选择一些值时,文本框包含拆分结果,但相同的值会反映到下拉列表中。我想在下拉列表中显示原始值。请提供一些解决方案

        $(document).ready(function () {
            var selText;
            $('#locate option').each(function () {
                $(this).attr('name', $(this).text());
            });
                    $('#locate').change(function () {
             //Gets the value for selected option
                    selText = $('#locate option:selected').text();
              //split the value
                     $('#locate option:selected').text(selText.split("_")[0]).trigger('liszt:updated');
                 //trying to add the values again to the dropdown
                    $('#locate').next().click(function () {
                    if (selText == "") {
                        $("#locate option").filter(":contains(" + selText.split("_")[0] + ")").text(selText).trigger('liszt:updated');

                });
        }

1 个答案:

答案 0 :(得分:3)

查看第$('#locate option:selected').text(selText.split("_")[0]).trigger('liszt:updated');

为方便起见,我们将它分成两部分:

var splittedText = selText.split("_")[0];
$('#locate option:selected').text(splittedText).trigger('liszt:updated');
你知道会发生什么吗?而不是将拆分文本分配给变量,而是将其设置为文本回到下拉列表。

只需将其分配给上面显示的变量:var splittedText = selText.split("_")[0];

并删除部分.text(splittedText)

所以它看起来像这样:

var splittedText = selText.split("_")[0];
$('#locate option:selected').trigger('liszt:updated');

<强>更新

触发自定义事件.trigger('liszt:updated');只会通知Chosen插件您已更新下拉列表。如果要单独设置文本框的文本,则需要手动执行:

$("#myTextBox").val(splittedText);

您可能知道(或不知道),选择器$('#locate option:selected')会返回所有选定<option>元素的列表,这些元素的父元素为id="locate"

因此,由于您很可能一次只选择1个选项,因此会在下拉列表中返回选定的选项。

当你调用jquery对象的函数.text()并提供参数(例如:.text(splittedText))时,它将设置jquery选择器返回的该列表中每个元素的文本。
如果您不希望选择选项更改其文本,请不要致电.text(splittedText)