Editable List box in HTML

 

I have recently came across a requirement where  a list of objects need to be added and edited. That object has only two fields which is name & id. So there is no point of using a editable data table as well. Following is the solution I came across.

1. Create a List box
2. Add a text box and a button which will add new items to the list box.
3. On click on list box item load a pop up which allows user to edit the items.

 

Code for generating Listbox at the View

 <div>
                      <selectsize="10" id="workAreas" multiple>
                        @foreach (var item in Model.WorkAreas)
                        {
              
                            <option id="option_@item.Id" value="@item.Id" onclick="new RegionManagement().OnWorkAreaEdit(@item.Id);" class="TextBoxLarge">
                                @item.Name
                            </option>
           
                        }
                      </select>
                </div>

Code for Input text box and button

1. <div>


2.                     <input type="text" id="txtWorkArea" />


3.                     <button id="btAddWorkArea" class="btn btn-success" onclick="new RegionManagement().AddNewWorkArea();">+</button>


4.                 </div>

Code for pop up

1. div id="DIV_EditWorkArea" style="display: none;">


2.     <div id="DIV_EditWorkAreaSubForm" class="InnerEntrySubForm" style="display: none; height:200px; margin-top:-175px;">


3.         <div class="InneEntryData" id="DIV_EditWorkAreaEditInner">


4.                 <input type="hidden"id="txtWorkAreaId" />


5.     <input type="text" id="txtEditWorkArea" />


6.     <span id="btEditWorkAreaOK" class="btn btn-success" onclick="new RegionManagement().SaveWorkAreavalue();">OK</span>


7.     <span id="btEditWorkAreaCancel" class="btn btn-warning " onclick="new RegionManagement().HideEditWorkArea();">X</span>


8.         </div>


9.     </div>


10. </div>

Javascript

1.  


2. this.OnWorkAreaEdit = function(id) {


3.     var txt = $('#option_' + id).text().trim();


4.     $('#txtEditWorkArea').val(txt);


5.     $('#txtWorkAreaId').val(id);


6.  


7.     $("#DIV_EditWorkArea").css('display', 'block');


8.     show("DIV_EditWorkAreaSubForm");


9. };


10. this.SaveWorkAreavalue = function() {


11.     var id = $('#txtWorkAreaId').val();


12.     var text = $('#txtEditWorkArea').val();


13.     $('#option_' + id).text(text);


14.     this.HideEditWorkArea();


15. };


16.  


17.  


18. this.AddNewWorkArea = function() {


19.     var uniqueId = Date.now();


20.     var text = $('#txtWorkArea').val();


21.     if (text != '') {


22.         $('#workAreas')


23.             .append('<option value="0" id="option_' + uniqueId + '"onclick="new RegionManagement().OnWorkAreaEdit(' + uniqueId + ');">' + text + '</option>');


24.         $('#txtWorkArea').val('');


25.     }


26. };

Hope this helps.

Happy Coding !!!!!!