CODEWITHSUNDEEP
javascriptjquerycsshtml
Earl Bunao
Earl Bunao

Reputation: 205

Create and Edit drop down list's content dynamically

I am wondering if I could have a drop down full with lists on a page and I can edit the text in that drop down and add another item. Basically it's up to the user what's the content of the drop down list. I am doing a project like a google form.

What I have tried at the moment is a standard drop down list. But what I'm trying to achieve is dynamically edit the values of the option and maybe I could add another item.

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

Upvotes: 1

Views: 3768

Answers (2)

Y.Puzyrenko
Y.Puzyrenko

Reputation: 2196

With 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());
   };
});

Here is fiddle http://jsfiddle.net/Zkh9L/1/

UPDATED: fiddle with popup input http://jsfiddle.net/Zkh9L/2/

UPDATE2: it looks like example from Vasani ,but you can add items http://jsfiddle.net/yUxr4/406/

Upvotes: 2

Dipali Vasani
Dipali Vasani

Reputation: 2536

check the DEMO

you need to type text and click on add or edit.

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("");
});

Upvotes: 2

Related Questions