html中value含空格赋值被截断
最近遇到一个问题，在放入含有空格value的时候，value总是被截断，然后提交的时候取到的值总不是想要的。比如我在ajax里获取到一些数据，然后需要依次放入一个下拉的选择框的选项里。本来像下面这样这样，随便写写就可以运行了:
|
1 2 3 |
$.each(list, function(i, item){ $('#some-select').append("<option value="+ item +">"+ item + "</option>"); }); |
但是提交之后被反馈说传进去的值好像不太对，比如item依次为A item, B item...，则最后到option里显示出来就是：
|
1 2 3 4 |
... <option value="A">A item</option> <option value="B">B item</option> ... |
解决办法
用encodeURIComponent和decodeURIComponent肯定可以堵上这个bug，因为他们会把空格直接转换成%20这样的标识符，防止在url传输的时候出现问题。但是这里似乎和url没半毛钱关系。
排查之后发现，虽然拿工具看到的是
|
1 |
<option value="A">A item</option> |
，实际上上面js代码输出给html的内容是：
|
1 |
<option value=A item>A item</option> |
如果这样就能看出问题了，大家都知道，html的标签属性是按照空格来区分的，所以取到value=A，就直接断掉了，然后item被认为是另外一个属性，如果直接打印到console就能看到：
|
1 |
<option value="A" item="">A item</option><option value="B" item="">B item</option> |
问题到这里解决办法就很简单了，给value赋值的时候，应该单独加上引号，才不会被识别为其他标签。
|
1 |
$('#some-select').append("<option value='"+ item +"'>"+ item + "</option>"); |
其他语言与此类似。
转载请注明转自：html中value含空格赋值被截断
虽然看不懂，但这个沙发我坐定了……
@有点蓝 这个是html，可以懂啊
@axiu 唉其实我看任何代码都是……似懂非懂的~
@axiu 正常，都是业余。
这种我是习惯用单引号的，所以不会出现你说的情况，我默认就会写成
$('#some-select').append('<option value="'+ item +'">'+ item + '</option>');
@zwwooooo 我会混用，以后要规范一下
过来看看。
还是creatElement保险
@大发 还是大发机智
善于发现问题，又能找到相应的解决方案……赞一个！
能决解问题的，赞
不懂，但是C语言中不能没有引号，多写点C就会不自觉的带上引号了
@yywr 字符串都得有引号啊。。
基本debug一下就可以看出问题了
@ilikecss 主要是第二次犯这个错误了，所以记录一下