-
Notifications
You must be signed in to change notification settings - Fork 0
/
inline-edit-dropdown.html
77 lines (68 loc) · 2.6 KB
/
inline-edit-dropdown.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Client-side Inline Edit (Dropdown)</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<h1>Client-side Inline Edit (Dropdown)</h1>
<div id="content">
<span id="labelField">Option 1</span>
<button id="editButton" class="btn btn-primary ml-2">Edit</button>
<select id="editableField" class="form-control d-none">
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
<div class="mt-2">
<button id="cancelButton" class="btn btn-secondary d-none ml-6">Cancel</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js" integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#editButton').on('click', function() {
var $label = $('#labelField');
var originalValue = $label.text();
var $select = $('<select>', {
id: 'editableField',
class: 'form-control'
});
$('#editableField option').each(function() {
var $option = $('<option>', {
value: $(this).val(),
text: $(this).text()
});
if ($(this).val() === originalValue) {
$option.attr('selected', 'selected');
}
$select.append($option);
});
$label.addClass('d-none');
$('#editButton').addClass('d-none');
$('#cancelButton').removeClass('d-none');
$select.removeClass('d-none').insertAfter($label);
$select.on('change', function() {
var newValue = $select.val();
$label.text(newValue);
$select.remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
$('#cancelButton').on('click', function() {
var $label = $('#labelField');
var currentValue = $label.text();
$('#editableField').val(currentValue);
$('#editableField').remove();
$label.removeClass('d-none');
$('#editButton').removeClass('d-none');
$('#cancelButton').addClass('d-none');
});
});
</script>
</body>
</html>