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

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

<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>

html options combobox count permanent
person XCeptable    schedule 15.10.2010    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Для постоянного добавления вам нужен серверный скрипт.

Для временного добавления вы можете использовать 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;
}

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

person Ben    schedule 15.10.2010
comment
Я попробовал ваш код, Стив, это не сработало, я принял его к своей форме. Вот что я сделал: function AddListItem(form) { var TestVar = form.txtInput.value; form.txtInput.value = ; вар сел = форма.выбрать; //количество переменных = sel.options.length; var opt = form.createElement(OPTION); sel.addChildNode (опция); opt.innerHTML = TestVar; опт.значение = TestVar; //form.select.options[count]=новый параметр(TestVar, TestVar, true); } Из вашего кода я понял, что он создает дочерние узлы для одного сеанса. - person XCeptable; 18.10.2010
comment
Если я сделаю это таким образом, это сработает, но все новые добавленные параметры исчезнут при обновлении страницы. function AddListItem(form) { var count = form.select.options.length; var TestVar = form.txtInput.value; form.txtInput.value = ; form.select.options[count]=новый параметр(TestVar, TestVar, true); } - person XCeptable; 18.10.2010
comment
Комментарий 1 - не сеанс, а только текущий экземпляр окна. Комментарий 2. Да, это временное явление работает против вас. Смотрите мой ответ ниже. - person Ben; 18.10.2010

arrow_upward
0
arrow_downward

Вы добавляете <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. Добавление нового элемента двойным щелчком текстового поля не очень удобно. Размытие может быть вариантом. Лучше кнопка «Добавить» после текстового поля.
person Nivas    schedule 15.10.2010
comment
thanX a Lot Nivas :-) Я сделал это так, прежде чем использовать ваш код, function AddListItem(form) { var count = form.select.options.length; var TestVar = form.txtInput.value; form.txtInput.value = ; form.select.options[count]=новый параметр(TestVar, TestVar, true); } мой код ведет себя так, как будто все новые добавленные параметры очищаются при обновлении. Затем я проверяю urs сейчас, и он также ведет себя так же. Потому что вы сделали это с помощью «createElement», поэтому я подумал, что параметры urs могут остаться, по крайней мере, на сеанс. Я пытаюсь сделать это шаг за шагом. Теперь мне нужно получить и отобразить данные JSON с php-сервера. - person XCeptable; 18.10.2010

arrow_upward
0
arrow_downward

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

Упрощенный 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 выполняет цикл и создает постоянное выпадающее меню.

person Ben    schedule 18.10.2010