Question

我想知道我是否可以在页面上有一个完整的下拉列表，我可以在该下拉列表中编辑文本并添加另一个项目。基本上，它取决于用户下拉列表的内容。我正在做一个像谷歌表格的项目。

我目前尝试的是标准下拉列表。但我想要实现的是动态编辑选项的值，也许我可以添加另一个项目。

<div>
<select>
   <option value="editable1">Editable1</option>
   <option value="editable2">Editable2</option>
</select>
</div>

Answer 1

使用jQuery：

var i = 0;
$('#add').bind('click', function(e){
   var str = '<option value="'+i+'">';
   if ($('#add_text').val() != ''){
       str += $('#add_text').val() + '</option>';
           $('#select').append(str);
       $('#add_text').val('');
       i++;
   };
});

$('#edit').bind('click', function(e){
   $('#select :selected').text($('#add_text').val());
   if ($('#add_text').val() != ''){
      $('#select :selected').text($('#add_text').val());
   };
});

这是小提琴http://jsfiddle.net/Zkh9L/1/

更新：摆弄弹出输入http://jsfiddle.net/Zkh9L/2/

UPDATE2：它看起来像是Vasani的例子，但你可以添加项目http://jsfiddle.net/yUxr4/406/

Answer 2

检查DEMO

您需要输入文字并点击添加或修改。

HTML：

<select id="dropdown">
    <option value="editable1" id="editable1">Editable1</option>
    <option value="editable2" id="editable2">Editable2</option>
</select>
<input type="text" id="element_text" />
<input type="button" value="Add" id="add" />
<input type="button" value="Edit" id="edit" />

JS：

$( "#add" ).click(function() {
  var option_text = $("#element_text").val();
  var option_data = "<option value='"+option_text+"' id='"+option_text+"'>"+option_text+"</option>";
  $("#dropdown").append(option_data);
  $("#element_text").val("");
});
$( "#edit" ).click(function(){
  var option_text = $("#element_text").val();
  var option_data = "<option value='"+option_text+"' id='"+option_text+"'>"+option_text+"</option>";
  var id = $("#dropdown").val();
  var node = $("#"+id);
  node.remove(); 
  $("#dropdown").append(option_data);
  $("#element_text").val("");
});

动态创建和编辑下拉列表的内容

2 个答案: