Question

我想有一个带有选项A，B，C和自定义的下拉列表。选择自定义后，下拉列表将替换为文本字段，以便用户可以提供自定义名称。

所以，首先我们有类似的东西

<select id="foo" name="foo">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
  <option value="custom">Custom</option>
</select>

选择自定义后，整个下拉列表将转换为：

<input name="foo" type="text" />

Answer 1

以下是使用demo函数的.replaceWith()：

$('#foo').change(function() {
    if ($(this).val() === 'custom') {
        $(this).replaceWith('<input name="foo" type="text" />');
    }
});

Answer 2

这个怎么样：

$('select.foo').bind('change', function(event) { 
 if ($(this).val() == "Custom")
 {
  $(this).hide()
  $("input.foo").show()
 }
});

你可以绑定输入框的丢失焦点事件来重新显示下拉列表，并根据需要添加它作为选项（只需给自定义选项一个id，然后更改其文本）......

Answer 3

这是一种不隐藏选择框的方法，根据上面的@Gaby提供更好的用户体验。

选择“自定义”选项时会显示一个文本框，并在选择其他任何内容时隐藏它。

    $('#foo').change(function()
    {
      var $this = $(this),
      id = $this.attr('id'),
      $txt = $('input:text[name=' + id + ']');
      if ( $this.val() == 'custom')
      {
         if ($txt.length == 0)
         {
            $txt = $('<input type="text" name="'+ id +'" />');
            $this.after($txt);
          }
          $txt.show().focus();
      }
      else
      {
          $txt.hide();
      }
});

Answer 4

$('#foo').click(
function()
{
if($(this).val()==="custom")
{
//either toggle the select and input button
//or add markup here. and clear the old amrkup
}

});

使用jQuery下拉列表到文本字段？

4 个答案: