akingdom · September 5, 2024 17:36
diff --git a/editable-dropdown.html b/editable-dropdown.html
 <html>
    <!-- 
        This replaces the SELECT dropdown menu with an editable INPUT textbox, 
        when the last ('other') option is selected from the list.
        
        Note that this may not be a good fit when supplying both display values and raw values, 
        as evidenced by the 'spanish' option.

        By Andrew Kingdom (C) 2023 all rights reserved. MIT License.
    -->
 <head>
    <style>
        .selecteditable {
            width: 100%;
            height: 30px;
            border: 1px solid black;
        }
        input.selecteditable {
            /* style for editable field */
            background-color: cornsilk;
        }
        option {
            padding: 10px;
        }
    </style>
 </head>

 <body>
    <h1>Hello</h1>
    Dear people,
    <select name="languages" id="languages" class="selecteditable">
        <option selected>English</option>
        <option>French</option>
        <option value="spanish">Spanish</option>
        <option >German</option>
        <option value="other">Other</option>
    </select>
    This example was brought to you by someone you know.
 </body>

 <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        console.log('The DOM is ready!');
        var languagesSelect = document.getElementById('languages');
        languagesSelect.dataset.initialSelectedValue = languagesSelect.options[languagesSelect.selectedIndex].value;
        console.log('initialSelectedValue: '+ languagesSelect.dataset.initialSelectedValue);

        languagesSelect.addEventListener('click', function () {
            this.classList.add('open');
        });

        languagesSelect.addEventListener('DOMContentLoaded', function () {
            console.log('The local DOM is ready!');
        });
        languagesSelect.addEventListener('change', function () {
            if (this.value === 'other') {
                const firstValue = this.querySelector(':first-of-type').value;
                const newElement = document.createElement('input');
                newElement.name = this.name;
                newElement.id = this.id;
                newElement.value = this.dataset.initialSelectedValue;
                newElement.classList = this.classList;
                newElement.addEventListener('DOMNodeInserted', function (event) {
                    if (event.target === newElement) {
                        console.log('The local DOM is updated!');
                        // after the element is added
                        this.focus();
                        this.select();
                    }
                });
                this.parentNode.replaceChild(newElement, this);

            } else {
                this.dataset.initialSelectedValue = this.options[this.selectedIndex].value;
            }
        });
    });

 </script>

 </html>
	<html>
	<!--
	This replaces the SELECT dropdown menu with an editable INPUT textbox,
	when the last ('other') option is selected from the list.

	Note that this may not be a good fit when supplying both display values and raw values,
	as evidenced by the 'spanish' option.

	By Andrew Kingdom (C) 2023 all rights reserved. MIT License.
	-->
	<head>
	<style>
	.selecteditable {
	width: 100%;
	height: 30px;
	border: 1px solid black;
	}
	input.selecteditable {
	/* style for editable field */
	background-color: cornsilk;
	}
	option {
	padding: 10px;
	}
	</style>
	</head>

	<body>
	<h1>Hello</h1>
	Dear people,
	<select name="languages" id="languages" class="selecteditable">
	<option selected>English</option>
	<option>French</option>
	<option value="spanish">Spanish</option>
	<option >German</option>
	<option value="other">Other</option>
	</select>
	This example was brought to you by someone you know.
	</body>

	<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function () {
	console.log('The DOM is ready!');
	var languagesSelect = document.getElementById('languages');
	languagesSelect.dataset.initialSelectedValue = languagesSelect.options[languagesSelect.selectedIndex].value;
	console.log('initialSelectedValue: '+ languagesSelect.dataset.initialSelectedValue);

	languagesSelect.addEventListener('click', function () {
	this.classList.add('open');
	});

	languagesSelect.addEventListener('DOMContentLoaded', function () {
	console.log('The local DOM is ready!');
	});
	languagesSelect.addEventListener('change', function () {
	if (this.value === 'other') {
	const firstValue = this.querySelector(':first-of-type').value;
	const newElement = document.createElement('input');
	newElement.name = this.name;
	newElement.id = this.id;
	newElement.value = this.dataset.initialSelectedValue;
	newElement.classList = this.classList;
	newElement.addEventListener('DOMNodeInserted', function (event) {
	if (event.target === newElement) {
	console.log('The local DOM is updated!');
	// after the element is added
	this.focus();
	this.select();
	}
	});
	this.parentNode.replaceChild(newElement, this);

	} else {
	this.dataset.initialSelectedValue = this.options[this.selectedIndex].value;
	}
	});
	});

	</script>

	</html>