Как привязать данные массива для выбора опции
у меня есть данные массива, которые он называет "provinsi", я получил массив на консоли, как обычный массив
вот мой код
<select id = "select">
<option value = "default">default</option>
</select>
<script>
console.info(provinsi)
var select = document.getElementById("select");
for(var i = 0; i < provinsi.length; i++)
{
var option = document.createElement("option"),
txt = document.createTextNode(provinsi[i]);
option.appendChild(txt);
option.setAttribute("value",provinsi[i]);
select.insertBefore(option,select.lastChild);
}
</script>
вот моя консоль "provinsi"
какие-нибудь предложения? спасибо раньше
извините, забыл об этом, мне нужно выбрать данные опции - это мой массив, который он называет "provinsi"
Я использую laravel на blade.php, я определяю из листовки, и я использую код для привязки данных к параметру в лезвии внутри тега <script>
Код сам по себе работает нормально. Можете ли вы показать, как вы заполняете переменную provinsi
Ваш код работает. Возможно ли, что этот код выполняется до загрузки DOM, а option не определен при его запуске?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Я считаю, что модель DOM еще не готова.
Попробуйте поместить свой код в IIFE.
(function() {
// the DOM will be available here
console.info(provinsi)
var select = document.getElementById("select");
for(var i = 0; i < provinsi.length; i++)
{
var option = document.createElement("option"),
txt = document.createTextNode(provinsi[i]);
option.appendChild(txt);
option.setAttribute("value",provinsi[i]);
select.insertBefore(option,select.lastChild);
}
})();
** Чтобы уточнить, как упомянул @karthick, убедитесь, что скрипт загружен в конец тега body.
вам нужно использовать DOMContentLoaded, чтобы сообщить, что dom готов, а не iife
@karthick Я ничего не должен. вы можете сделать это в iife, если скрипт загружен в конце тега body. Обновлено: на самом деле, это выполняется быстрее, чем обработчик загрузки, потому что он ожидает только готовности DOM, а не загрузки всех изображений. И это работает в любом браузере.
Надеюсь, это сработает, счастливое кодирование :) Примечание: измените массив провинций на исходные значения
$(document).ready(()=> {
let provinces = ["test1", "test2", "test3", "test4" ]
$.each(provinces, function(key,item) {
$("#select").append(new Option(item, key));
});
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "select">
<option value = "default">default</option>
</select>DOM может не завершить загрузку при запуске вашего скрипта. Вы должны запустить свою функцию на DOMContentLoaded.
<select id = "select">
<option value = "default">default</option>
</select>
<script>
var provinsi = ["test1", "test2"];
document.addEventListener("DOMContentLoaded", function(event) {
//DOM fully loaded and parsed
var select = document.getElementById("select");
for(var i = 0; i < provinsi.length; i++)
{
var option = document.createElement("option"),
txt = document.createTextNode(provinsi[i]);
option.appendChild(txt);
option.setAttribute("value",provinsi[i]);
select.insertBefore(option,select.lastChild);
}
});
</script>
<script>
</script>
Каков ожидаемый результат?