时间戳

首页 > 解决方案 > 如何使用 w2ui 在组合框中获取字符串？

javascript - 如何使用 w2ui 在组合框中获取字符串？

问题描述

我想在框架 w2ui 的组合框中选择或键入文本。当我键入“Enter”键时，我会在组合框中获取值以将该值推送到数组中（请参阅我的代码中的 addItem 函数）。我不知道如何访问组合框中的字符串？

这个组合的文档在这里：http ://w2ui.com/web/docs/1.5/form/fields-list

我对我在这里尝试做的事情做了一个 jsfiddle： https ://jsfiddle.net/espace3d/bLughmy9/

这是一个带有标签的简单待办事项列表。

<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: fields-3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>

<div style="height: 10px"></div>
<div class="w2ui-field w2ui-span3">
    <label>Combo:</label>
    <div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<div style="height: 20px"></div>
<style>
.w2ui-field input {
    width: 200px;
}
.w3ui-field > div > span {
    margin-left: 20px;
}
</style>

<script type="text/javascript">

var data={
description:["georges","henry"],
}

var addItem=function(item){
        console.log(item)
        data.description.push(item)
        data.description.sort();
}

$('input[type=combo]').w2field('combo', { 
items: data.description,
});

$( 'input[type=combo]' ).keypress(function(event) {
        if(event.key == 'Enter'){
        console.log( "Handler for .keypress() called." );
        /////////////////////////////////////////
        //WHAT I WANT TO DO
        //addItem(something)
        }
});
</script>
</body>
</html>

标签： javascriptcomboboxtagsw2ui

解决方案

您可以通过调用来访问 w2field 对象$element.w2field()。

之后，您可以通过调用get()w2field 对象来访问内容。

旁注：get()可能返回一个对象，例如，如果您的项目是表单中的对象{ id: 123, text: "my text" }，这对于 w2ui 组合框或列表字段有效。

在您的情况下，您可以按如下方式更改代码：

$( 'input[type=combo]' ).keypress(function(event) {
        if(event.key == 'Enter'){
            console.log( "Handler for .keypress() called." );
            var w2ui_field = $(this).w2field();
            var value = w2ui_field.get();
            addItem(value);
            w2ui_field.options.items = data.description;
        }
});

请注意，如果您想在组合框中显示新项目，则必须将它们重新分配给 w2field 选项。

如果你不想这样，你可以省略这w2ui_field.options.items = data.description;部分。

更新小提琴：https ://jsfiddle.net/k548j0w1/

推荐阅读