我有一个下拉列表,其中包含选项1到10.当所选项目为10时,下拉列表将替换为文本框中编号为10的文本框。
如果用户从下拉列表中选择10,然后清除10并将该框保留为空,我想返回并重新分配在下拉菜单转到之前选择的值进入文本框。
例如:如果用户在下拉列表中选择了3,然后选择了10,我想将10保留在文本框中。如果清除了值,并且文本框再次变为下拉列表,我想重新分配给3.。
这是下拉标记:
<select id='qty'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10+</option>
这是jQuery:
$('#qty').live('change', function () {
if ((this.value) == 10) {
$(this).replaceWith($('<input/>', {
'type': 'text',
'value': +(this.value)
}));
}
});
这是DEMO。
答案 0 :(得分:0)
var lastValue;
$('#qty').live('change', function () {
if ((this.value) == 10) {
$(this).replaceWith($('<input/>', {
'type': 'text',
'value': +(this.value)
}));
}
else{
lastValue = this.value;
}
});
然后在必须显示时使用lastValue重置selectbox的值。
编辑:修改了jsfiddle,你需要再次创建列表 http://jsfiddle.net/qje6uywg/5/
答案 1 :(得分:0)
请记住在替换时在输入上添加id,以便在更改文本输入的值时也会更改。但与dupa的回应非常相似。
$('#qty').live('change', function () {
if ((this.value) == 10) {
$(this).replaceWith($('<input />', {
'type': 'text',
'value': + (this.value),
'id': 'qty'
}));
} else if ( this.value === '' && $(this).prop('type') === 'text' ) {
console.log('Do whatever you want when value is empty');
}
});