How to make HTML combo box save values added by user in textbox?_问答_开发者

How to make HTML combo box save values added by user in textbox?

开发者 https://www.devze.com 2023-01-20 05:55 出处：网络

I have made a combobox for a web page. It takes values from user into text box & adds those to list on double click in text box. I want to make user entered values permanently stored as option in

相关专题：html-select

I have made a combobox for a web page. It takes values from user into text box & adds those to list on double click in text box. I want to make user entered values permanently stored as option in list. How can I do it. One more question is how can I count the number of options in list so that I add an element next to that.

Here is my code.

<html>
<head>
<script language=&q开发者_Go百科uot;javascript">
function AddListItem(form)
{

var TestVar = form.txtInput.value;
form.txtInput.value = "";
form.select.options[3]=new Option(TestVar, TestVar, true);

}
</script>
<head>

<body>
<form id='Form1'>
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="AddListItem(this.form)"/>
<p>
<select id='select'>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>

To permanently add you need a server-side script.

To temporarily add you can use javascript:

function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

To count the number of options:

function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

(only for conceptual use, not tested as functional)

You add an <option> dynamically like this:

function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

selectId is the id of <select>, optText is the text to be displayed in the dropdown and optValue is the value that will be sumbitted to the server.

For your code, call it as

<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

As you see, you don't really need to find the length of the options, but you can do it via options.length:

document.getElementById(selectId).options.length;

That said,

You might want to add this to the dropdown, as well as to pass to the server, to add to some table, for instance. You might have to do that call via AJAX, when you add it to the dropdown
Adding the new item on double click of the textbox is not very usable. On blur might be an option. Better is an 'Add' button after the textbox .

Sounds like you need a server-side script then. When you submit the form, you can have a field that is 'remembering' all of the dropdown options:

The simplified HTML:

<form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

The simplified PHP:

<?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];

echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
  echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>

To explain: PHP saves the ddOptions in the form -> User enters new option -> The form is submitted -> PHP finds the stored values -> PHP pushes on the new value -> PHP loops through and creates your permanent dropdown menu.