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

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

0 голосов
/ 15 октября 2010

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

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

Ответы [ 3 ]

0 голосов
/ 15 октября 2010

Вы добавляете <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. Добавление нового элемента при двойном щелчке текстового поля не очень удобно.На размытие может быть вариант.Лучше кнопка «Добавить» после текстового поля.
0 голосов
/ 18 октября 2010

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

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

0 голосов
/ 15 октября 2010

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

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

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

...