保存下拉列表的值并重新分配答案

【问题标题】：Save value of a drop-down list and reassign it保存下拉列表的值并重新分配
【发布时间】：2014-12-16 15:17:51
【问题描述】：

我有一个包含选项 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。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

   var lastValue;

    $('#qty').live('change', function () {
       if ((this.value) == 10) {
           $(this).replaceWith($('<input/>', {
               'type': 'text',
               'value': +(this.value)
            }));
       }
       else{
          lastValue = this.value;
       }
    });

然后在必须显示时使用 lastValue 重置选择框的值。

编辑：修改了 jsfiddle，你只需要再次创建列表 http://jsfiddle.net/qje6uywg/5/

【讨论】：

【解决方案2】：

请记住在替换时在输入中添加 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');
  }
});

【讨论】：

我认为当文本框失去焦点时需要执行一个 .blur() 事件。
是的，当文本框失去焦点时 change 和 blur 都会发生变化，如果你想使用 blur 你只需要为你的文本框创建一个新的实时事件。
在“随心所欲...”部分，我添加了一个：$('#qty').show 以显示下拉列表，但它不起作用。这不正确吗？
不，当您使用$(this).replaceWith() 函数时，您将选择输入替换为文本输入。因此选择输入不再存在，您将不得不再次将文本输入替换为选择输入。