Почему хромированные консоли jquery добавили значение для выбора параметров еще до того, как я назначил значение
У меня есть вход выбора, где я добавляю еще один вариант через jQuery,
Шаги, которые я здесь выполняю, - это создание элемента option методом createElement документов, затем добавление некоторого количества innerHTML и, наконец, установка value.
Проблема заключается на втором шаге, когда я только что создал элемент и добавил только innerHTML (еще не добавлял значение), хром объединяет элемент с value, который я добавил на следующем шаге.
Как хром это делает? и почему ?
Проверьте фрагмент кода ниже:
Примечание: Фрагмент здесь показывает это правильно, но браузер хромне, когда я запускаю код из отдельного файла .html.
Однако Fire Fox показывает правильный вывод.
$(document).ready(function() {
$('#addSteve').on('click', function() {
var newVal = document.createElement('option');
newVal.text = 'Steve';
console.info(newVal); // didn't assign a value 'hello', still consoles it;
newVal.value = 'Hello';
console.info(newVal); // supposed to console the value here only;
$('#wrapper').find('select').append(newVal);
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "wrapper">
<select>
<option value = "John" selected>John</option>
<option value = "Nick">Nick</option>
<option value = "Gomez">Gomez</option>
</select>
</div>
<button type = "button" id = "addSteve">Add Steve</button>то на этот вопрос невозможно ответить, потому что демонстрация не показывает, в чем проблема
option не имеет HTML, он может содержать только простой текст и экранированные символы HTML. Хотя некоторые браузеры показывают установленный innerHTML как текст опции, вы не можете полагаться, что все браузеры правильно отображают недопустимую разметку.
@ Teemu как тогда текст в option поместить?
option.text - это свойство, которое нужно установить.
@guradio есть много вопросов, которые нельзя здесь продемонстрировать, потому что фрагмент кода работает в iframe (я полагаю), но в отдельном файле .html он явно работает. Если хотите, могу ссылку на какой-нибудь gist. Хотите, чтобы я ? Спасибо
Вы видите маленький синий значок i в консоли Chrome? Если вы его видите, наведите указатель мыши на значок и прочтите объяснение.
@Teemu нет, я не вижу такого значка, я обновил свой локальный файл .html с помощью свойства newVal.text, но результат тот же
См. stackoverflow.com/a/23429304/1169519
@Teemu, который немного объясняет причину, но есть ли способ получить синхронный / ожидаемый результат?
В ответе zzzzBov упоминается: "регистрировать отдельные значения".
Другое объяснение здесь
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Трассировка выводится в Chrome примерно за 8 мс (по крайней мере, на моем компьютере ваш может быть быстрее / медленнее) и поэтому отражает значение переменной после этих миллисекунд. Видеть:
$(document).ready(function() {
$('#addSteve').on('click', function() {
var newVal = document.createElement('option');
newVal.text = 'Steve';
console.info(newVal);
setTimeout(function(){
newVal.value = 'Hello';
console.info(newVal);
}, 8); // replace with a lower number see the value traced in the earlier console log.
$('#wrapper').find('select').append(newVal);
});
});
Пожалуйста, проверьте
Noteв конце моего вопроса, фрагмент работает здесь, но не для отдельного файла.html