<input type="text" id="customerContact" name="customerContact" value="${model.customerContact }" style="width: 185px"/>
将上面的<input>标签初始化为combobox插件后,在谷歌浏览器上右键【查看元素】会发现整个<input>标签的代码会转变为以下格式的代码:
<input comboname="customerContact" class="combobox-f combo-f" id="customerContact" value="" style="width: 185px; display: none;" type="text"> (1)
<span style="width: 183px; height: 20px;" class="combo">
<input style="width: 161px; height: 20px; line-height: 20px;" autocomplete="off" class="combo-text" type="text">
<span><span style="height: 20px;" class="combo-arrow"></span></span>
<input value="" name="customerContact" class="combo-value" type="hidden"> (2)
</span>
第一注意点:
在用form向后台发送请求时,发送的customerContact参数的值是在(2)处得到的,而不是在(1)处。因为在combobox的文本框上输入数值的时候,会把值赋给(2)处<input>的value,而不会赋值给(1)处<input>的value。
故在获取id为customerContact的值时候,应该采用以下两种方式:
1、$('input[name="customerContact"]').val();
2、$('#customerContact').combobox("getText");
注:$('#customerContact').val()—这种方式取到的值是空的,因为它会获取(1)处的值,除非你像这样显示地给他赋值$('#customerContact').val(XXX)
第二注意点:
当你直接在combobox插件文本框上,手写输入值。
1、在输入英文、字母和符号的情况下,(2)处<input>的value可以及时、正确显示输入的结果,(1)处的<input>的value依然为空,这时可以用上文提到的两种取值方式进行取值;
2、在输入中文的情况下,这时候combobox插件不能把输入值及时、正确的赋给(1)处<input>value,比如我在这里输入“人民币”
但在(2)处的value却是re
这说明combobox插件不能正确读取从文本框上输入的中文!这点在向后台传递参数的时候就要特别注意!因为这时候你向后台传递的值是re,而不是人民币了!
这里获取customerContact的值的话,应该使用$('#customerContact').combobox("getText"),另外要保证传递给后台的数值是正确的话,应该显示地给(2)处赋值—
$('input[name="customerContact"]').val($('#customerContact').combobox("getText"))。
第三注意点:
页面第一次加载完毕后,未对combobox插件进行任何操作之前(除鼠标单双击,右键操作之外),如果你直接把某个值复制粘贴在文本框上,这时侯(2)处的value依然是空的,所以传递给后台的参数值也是空的,但可以通过$('#customerContact').combobox("getText")获取上面的值。