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

StackOverflow https://stackoverflow.com/questions/3940255

문제

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="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,

  1. 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
  2. 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.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top