Блог

Я создаю экран для пользователей для проверки документов, используя определенные объекты и localStorage, чтобы сохранить то, что сделал пользователь, на случай, если он случайно закроет браузер или что-то в этих строках. Из-за того, что документы имеют разные категории, я не отображаю их все сразу, вместо этого я очищаю выбор опций и добавляю их динамически. Когда пользователь возвращается к другому фильтру, я проверяю локальное хранилище и отмечаю параметры, которые пользователь уже проверил. Например: вместо отображения «Document 1» в тексте опции должно быть указано «Document 1 — Verified —«.

Однако я обнаружил, что добавление опций динамически приводит к путанице с текстовыми индексами. Он корректно отображает их в браузере, но при попытке получить к ним доступ я обнаружил, что весь текст был добавлен к элементу 0, вместо добавления к элементу 1,2 … и так далее. Поэтому мне становится все труднее добавлять «—Verified —» в теги, мне нужно добавить что-то, чтобы различать строки, затем разделить их и добавить «—Verified —«

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

 <select id="Documents">
<option val="-1">--Select a document--</option>
</select>
<br/>
<button id="button">Click to add an option</button>
  

Пример JavaScript jQuery:

 var i = 0;

$("#button").on("click", addOption);

function addOption() {
var text="New option added";
$("#Documents").append(new Option(text, i));
  i;
alert($("#Documents").eq(0).text());
alert($("#Documents").eq(i).text());
}
  

Когда выполняется вызов .eq(0).text(), отображается предупреждение «—Выберите документ, добавлена новая опция». Между тем, eq(i).text() вернет «», а вызов .eq(i).val() возвращает undefined . Я делаю что-то не так?

Поработайте с кодом, если хотите это проверить: https://jsfiddle.net/ek563nd7/1 /

Спасибо за ваше время.

Использование eq() здесь неверно, по сути, вы пытаетесь выбрать элемент с идентификатором Documents с индексом i , но вам нужны дочерние элементы (the options ) of select#Documents , верно?

итак, я полагаю, вы хотите использовать: $("#Documents").children().eq(i).text()

Смотрите фрагмент ниже

 var i = 0;

$("#button").on("click", addOption);

function addOption() {
  var text = "New option added_"   i;
  $("#Documents").append(new Option(text, i));
    i;
  console.log($("#Documents").children().eq(i).text());
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="Documents">
  <option val="-1">--Select a document--</option>
</select>
<br/>
<button id="button">Click to add an option</button>  

.eq() используется для уменьшения набора совпадающих элементов до одного с указанным индексом., Итак, вы пытались уменьшить совпадающие элементы с идентификатором Documents , то есть только один, <select> .