Question

我已经尝试了几个jQuery组合框（例如the simple combobox plugin from jQuery）并且显然它们都是美化的选择小部件（即你可以从列表中选择具有自动完成，动画和诸如此类的东西），但不是真正的组合框。允许用户从列表中进行选择，但输入不在列表中的值。

（对于上面提到的插件，即使您将变量invalidAsValue设置为true，它也只在内部设置值，而不是在<form>的POST中使用的字段中设置值，所以如果你列出＆＃34; A＆＃34;＆＃34; B＆＃34;＆＃34; C＆＃34;用户输入＆＃34; D＆＃34;，结果将是＆＃34; A＆＃34;因为如果它与项目不匹配，它将只使用预选。）

HTML5 / datalist功能（请参阅demo）也无法使用，因为它在某些浏览器中非常错误（在Firefox中它基本上是一个自动完成功能，有时只显示整个列表，在Safari中它根本不受支持，尽管它在Chrome中正常工作。

我只想要一个基本的组合框，因为它至少在20世纪90年代初存在于地球上的几乎所有图形工具包中：

预选了一个项目
用户可以编辑项目
或从下拉列表中选择一个项目

有很多演示（包括上面提到的jQuery插件）满足上述三点，但我还需要：

用户输入的内容应出现在HTTP-POST变量

（任何浏览器的URL栏都是该窗口小部件的示例：用户可以从列表中选择，但他也可以输入不在列表中的URL）

我不需要动画，皮肤或类似功能，事实上我更喜欢最简单的解决方案。

Answer 1

由于这个问题用jQuery标记，我假设您的问题是解析组合框选项以正确获取值。以下是如何执行此操作的一个非常基本的示例：

Fiddle

<强> JS

$(document).ready(function() {
    $('select').change(function() {
        alert(
            $(this).children(':checked').html()
        );
    });
});

<强> HTML

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

听起来您希望在选项中指定值，但在这种情况下您使用$(this).children(':checked').val()。

正确填充POST变量的jQuery组合框

1 个答案: