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

Save value of a drop-down list and reassign it

本文关键字：分配 新分配 下拉列表 保存      更新时间：2023-09-26

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

这是演示。

   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/

请记住在替换输入时在输入中添加 id，以便在更改文本输入的值时也会更改。但与杜帕反应非常相似。

$('#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');
  }
});
相关文章：