html中value含空格赋值被截断

By
写代码

最近遇到一个问题,在放入含有空格value的时候,value总是被截断,然后提交的时候取到的值总不是想要的。比如我在ajax里获取到一些数据,然后需要依次放入一个下拉的选择框的选项里。本来像下面这样这样,随便写写就可以运行了:

但是提交之后被反馈说传进去的值好像不太对,比如item依次为A item, B item...,则最后到option里显示出来就是:

解决办法

encodeURIComponentdecodeURIComponent肯定可以堵上这个bug,因为他们会把空格直接转换成%20这样的标识符,防止在url传输的时候出现问题。但是这里似乎和url没半毛钱关系。

排查之后发现,虽然拿工具看到的是

,实际上上面js代码输出给html的内容是:

如果这样就能看出问题了,大家都知道,html的标签属性是按照空格来区分的,所以取到value=A,就直接断掉了,然后item被认为是另外一个属性,如果直接打印到console就能看到:

问题到这里解决办法就很简单了,给value赋值的时候,应该单独加上引号,才不会被识别为其他标签。

其他语言与此类似。

Comments: 16

  1. 虽然看不懂,但这个沙发我坐定了…… :smile:

    04月09日
  2. 这种我是习惯用单引号的,所以不会出现你说的情况,我默认就会写成
    $('#some-select').append('<option value="'+ item +'">'+ item + '</option>');

    @zwwooooo 04月11日
  3. 过来看看。

    04月11日
  4. 还是creatElement保险 :mad:

    04月12日
  5. 善于发现问题,又能找到相应的解决方案……赞一个!

    04月12日
  6. 能决解问题的,赞

    04月13日
  7. :razz: :razz: 看不懂 怎么办

    04月16日
  8. 不懂,但是C语言中不能没有引号,多写点C就会不自觉的带上引号了 :mrgreen:

    @yywryywr 04月17日
    • @yywr 字符串都得有引号啊。。

      @venmax 04月27日
  9. 基本debug一下就可以看出问题了

    04月19日
    • @ilikecss 主要是第二次犯这个错误了,所以记录一下

      @venmax 04月27日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: