如何使用输入字段中的值填充下拉字段

Question

下面是我的下拉列表，我试图从输入字段获取插入的值。

<div id="escDivTable" class="subText">You don't have any values. Set up an escalation value.</div> 
<select id ="Options"> 
<option>Option1</option><option>Option2</option><option>Option3</option></select> 

这是从哪里我试图得到填充到下拉列表中的值的输入字段。

<input class="name" id="nameInput" title="Name should be unique" type ="text" maxlength="100" /> 

这里是一个变种获取输入值的JS：

name = $(".name").val() 

我卡在这个地方，至于如何使用这个“名”值会自动弹出到下拉？我正在尝试这样的事情。显然dosent工作..

<script type='text/javascript'> 
$(function() { 
$('.name').change(function() { 
name = $(".name").val() 
$('#Options').val(name); 
}); 
}); 
</script> 

有没有人有想法？请帮忙！

Answer 1

尝试

$(function() { 
    var $opts = $('#Options'); 
    $('.name').change(function() { 
     var name = this.value; 
     var len = $opts.find('option').filter(function() { 
      return $(this).text() == name 
     }).length; 
     if (!len) { 
      $opts.append('<option value="' + name + '">' + name + '</option>'); 
     } 
     $opts.val(name) 
    }); 
}); 

演示：Fiddle