Entry
How can I combine a SELECT element and an INPUT TYPE="text" field so that the user can input new OPTIONs for the SELECT?
Sep 26th, 2001 04:52
Knud van Eeden, Martin Honnen,
Here is an example. For NN6 and IE4+ it alternatively hides/shows the
select respectively the input while for other browser the elements are
shown next to each other.
<html>
<head>
<script>
function enterNewOption (select, field) {
field.select = select
field.onchange = setNewOption;
if (select.style) {
select.style.display = 'none';
field.style.display = '';
}
field.focus();
}
function setNewOption () {
var option = new Option(this.value, this.value);
this.select.options[this.select.options.length] = option;
if (this.style) {
this.style.display = 'none';
this.select.style.display = '';
}
this.select.focus();
}
</script>
</head>
<body>
<form name="formName">
<select name="selectName"
onchange="if (this.options[this.selectedIndex].value = 'new')
enterNewOption (this, this.form.fieldName);"
>
<option selected>select or enter an option</option>
<option value="new">Enter new option</option>
<option value="Kibo">Kibo</option>
<option value="Maho">Maho</option>
</select>
<input type="text" name="fieldName"
onfocus="window.status = 'Enter new option.';"
>
<script>
if ((document.all || document.getElementById) && !window.opera)
document.formName.fieldName.style.display = 'none';
</script>
</form>
</body>
</html>
Bewow is a further example which works with NN4, IE4+ and NN6 and
shows/hides the select/input. To implement this for NN4 however requires
breaking up the form into two:
<html>
<head>
<style type="text/css">
#form1Container {
position: relative;
visibility: visible;
}
#form2Container {
position: absolute;
visibility: hidden;
}
</style>
<script type="text/javascript">
function enterNewOption (select, div1Id, div2Id, formName, fieldName) {
if (document.layers) {
window.document[div1Id].visibility = 'hide';
window.document[div2Id].visibility = 'show';
window.document[div2Id].document[formName][fieldName].focus();
}
else if (document.all) {
document.all[div1Id].style.visibility = 'hidden';
document.all[div2Id].style.visibility = 'visible';
document[formName][fieldName].focus();
}
else if (document.getElementById) {
document.getElementById(div1Id).style.visibility = 'hidden';
document.getElementById(div2Id).style.visibility = 'visible';
document[formName][fieldName].focus();
}
}
function setNewOption (input, div1Id, div2Id, formName, selectName) {
var option = new Option(input.value, input.value);
if (document.layers) {
var select = window.document[div2Id].document[formName][selectName];
select.options[select.options.length] = option;
window.document[div1Id].visibility = 'hide';
window.document[div2Id].visibility = 'show';
select.focus();
}
else if (document.all) {
var select = document[formName][selectName];
select.options[select.options.length] = option;
document.all[div1Id].style.visibility = 'hidden';
document.all[div2Id].style.visibility = 'visible';
select.focus();
}
else if (document.getElementById) {
var select = document[formName][selectName];
select.options[select.options.length] = option;
document.getElementById(div1Id).style.visibility = 'hidden';
document.getElementById(div2Id).style.visibility = 'visible';
select.focus();
}
}
</script>
</head>
<body>
<div id="form2Container">
<form name="form2">
<input type="text" name="fieldName"
onchange="setNewOption(this, 'form2Container', 'form1Container',
'form1', 'selectName');"
onfocus="window.status = 'Enter new option!';"
/>
</form>
</div>
<div id="form1Container">
<form name="form1">
<select name="selectName"
onchange="if (this.options[this.selectedIndex].value == 'new')
enterNewOption(this, 'form1Container',
'form2Container', 'form2', 'fieldName');"
>
<option>select an option or select new to add one</option>
<option value="new">add new option</option>
<option>Kibo</option>
<option>Kibology</option>
</select>
</form>
</div>
</body>
</html>
-----------------------------------------------------------------------
--- Knud van Eeden - 26 September 2020 - 15:55 ------------------------
[Internet: see also:
http://www.faqts.com/knowledge_base/view.phtml/aid/8702/fid/129]
-----------------------------------------------------------------------
