Как заставить поле со списком HTML сохранять значения, добавленные пользователем в текстовое поле?

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

Вопрос

Я сделал поле со списком для веб-страницы.Он принимает значения от пользователя в текстовое поле и добавляет их в список при двойном щелчке в текстовом поле.Я хочу, чтобы введенные пользователем значения постоянно сохранялись как опция в списке.Как мне это сделать.Еще один вопрос: как мне подсчитать количество опций в списке, чтобы добавить элемент рядом с ними.Вот мой код.

<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>
Это было полезно?

Решение

Чтобы навсегда добавить вам нужен скрипт на стороне сервера.

Чтобы временно добавить вы можете использовать JavaScript:

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

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

Подсчитать количество вариантов:

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

(Только для концептуального использования, не испытываемых как функционал)

Другие советы

Вы добавляете An <option> Динамически такой:

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

SelectID - это идентификатор <select>, optText текст отображается в раскрывающемся списке и optValue это значение, которое будет настроен на сервер.

Для вашего кода назовите это как

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

Как видите, вам действительно не нужно найти длину вариантов, но вы могу Сделай это через options.length:

document.getElementById(selectId).options.length;

Что сказал,

  1. Возможно, вы захотите добавить это в раскрывающийся список, а также передать на сервер, например, чтобы добавить в какой-нибудь таблицу. Возможно, вам придется сделать этот звонок через AJAX, когда вы добавляете его в раскрывающийся
  2. Добавление нового элемента на двойной щелчке TextBox не очень полезно. На размытие может быть вариант. Лучше - кнопка «Добавить» после текстового поля.

Похоже, тогда вам нужен серверный скрипт.Когда вы отправляете форму, у вас может быть поле, которое «запоминает» все параметры раскрывающегося списка:

Упрощенный HTML:

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

Упрощенный 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>";
?>

Объяснить:PHP сохраняет ddOptions в форме -> Пользователь вводит новую опцию -> Форма отправляется -> PHP находит сохраненные значения -> PHP вводит новое значение -> PHP проходит цикл и создает постоянное раскрывающееся меню.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top