jquery 名称中包含 space 的参考 ID

Question

我正在使用带有 jquery 多 select 扩展名的 jquery。

对于我的 html 语法：

<select multiple="multiple"  id="test">
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>

然后我得到 multi-select 的值：

  $(function() {

        $('#test').change(function() {
            console.log($(this).val());
        }).multipleSelect({
            width: '100%'
        });
    });

这 100% 有效。

我的问题是，当 ID 中有 space 时，我该如何让它工作。我知道在 ID 或名称中使用 space 并不理想，但这是目前的情况，我需要从带有 space 的 ID 中获取多个 select 选项。例如：

<select multiple="multiple"  id="test two">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
    </select>

$(function() {

            $('#test two').change(function() {
                console.log($(this).val());
            }).multipleSelect({
                width: '100%'
            });
        });

这失败了，里面有 space。

我已经尝试了如下几个选项，但都没有成功。

任何建议都非常感谢。

$(function() {

$("#test two").change(function() {
                    console.log($(this).val());
                }).multipleSelect({
                    width: '100%'
                });
            });

Answer 1

Space 不是 HTML4 和 HTML5 中 ID 属性中的有效字符。顺便说一句，您可以使用属性选择器：

$("[id='test two']").change( ... );

Answer 2

像这样

$("select[id='test two']").change(function() {
    console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple"  id="test two">
    <option value=1>1</option>
    <option value=2>2</option>
    <option value=3>3</option>
</select>

可以（在 ID 中使用 space）但最好不要将 id 与 space 一起使用，将 _ 添加到您的选择器中，例如 [=13] =]

Answer 3

jQuery 文档在 Selectors 上有一个综合页面。您会找到所有可用于基于属性（id 是）查询的选择器，但它也有这条建议：

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

所以你有两个选择：

$('#test\ two')

或

$('[id="test two"]')

综上所述，HTML spec 不允许在元素的 id 属性中使用空格。浏览器可能仍会按照您的预期呈现页面，但如果可以避免的话，您真的不应该这样做；如果只是因为它使事情变得比它们需要的复杂得多，正如您所发现的那样。

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Answer 4

您可以像这样使用属性选择器：

$("[id='test two']").change(function{
    // Logic here...
});

或者，您可以将 id 更改为 class...

Answer 5

当您 select 元素按 id 属性时，不要使用 spaces，因为 space 字符对于 ID 无效 attribute.why 不符合约定？。

ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

如果您不关心任何类型的约定，那么 select 就像其他答案所建议的那样。

$("select[id='test two']").change(function() {
    console.log($(this).val());
});

@courtesy亚历山大

jquery 名称中包含 space 的参考 ID

jquery reference ID with space in name

javascript

jquery

jquery-selectors

jquery-multiselect