Вывод HTML-элемента формы из Javascript

0

Я только начал работать с Javascript, так что это может звучать как вопрос новичков. Я хочу распечатать элемент выбранной формы. Но я выполняю его в части javascript моего кода, так как список параметров должен быть доступен из массива в скрипте. Я использовал элемент div в части HTML для вывода этого элемента select. Мой код выглядит следующим образом.

<head>
 <script>

    function currentWorlds()
    {
      var string="<select id='worldSelected'>";
      for(var i=0;i<universe.name.length;i++)
       {
          string+="<option value='"+i+"'>"+universe.name[i]+"</option>";
       }
      string+="</select>";

      $('#universeOptions').html(string);

    }

  $(function(){
     currentWorlds();
  });


 </script>
</head>

<body>
<form>          
Select from current games: <br>         
<div id="universeOptions"></div>
<input type="button" id="selectWorldButton" name="selectWorld" value="Select Game"> </br>

</form>
</body>

Я включил только соответствующий код, с которым у меня возникла проблема. В этом случае юниверс - это объект, у которого есть атрибут массива, называемый именем. Эти имена - это параметры, которые я хочу отображать и на основе ввода пользователя, хотят обрабатывать. Кажется, я не могу сохранить идентификатор опции выбора после выбора. Это означает, что когда я console.log значение worldSelected, он выводит 0, один раз. И ничего не выводит после выбора новой опции. Есть что-то, чего я не хватает? Помощь будет оценена!

Благодарю!

  • 0
    Можете ли вы добавить код, где вы регистрируете выбранный мир? и 0 может быть результатом того, что вы выбрали первый элемент. идентификатор вашего первого элемента равен 0. потому что я начинаю с 0 в цикле
  • 0
    он находится в основной функции javascript сразу после вызова функции currentWorlds (). 'console.log ("Мир выбран"); console.log (document.getElementById ( "worldSelected") SelectedIndex.); '
Показать ещё 1 комментарий
Теги:
select
forms

3 ответа

0
Лучший ответ

Я бы немного отредактировал код... Попробуйте это и сообщите мне, если он работает:

Тест на скрипку здесь

Просмотр консольных журналов на JsBin

function currentWorlds(){
    var universe = {
        name: ["Uni A","Uni B","Uni C","Uni D","Uni E","Uni F","Uni G"]
    };
    var select = "<select id='worldSelected'></select>";
    $('#universeOptions').html(select);
    for(var i=0;i<universe.name.length;i++){
        $('#worldSelected').append($("<option></option>")
                           .attr("value",i)
                           .text(universe.name[i]));
    }
}

$(function(){
    currentWorlds();
    $('#worldSelected').change(function(){
        console.log($(this).val());
    });
});
Поделиться
  • 0
    Кажется, ничего не выходит из системы.
  • 0
    @Saima - Извините, обновлена ссылка Jsbin - jsbin.com/fikusalu/1/edit?html,js,console,output
Показать ещё 2 комментария
1

введите код, используя jquery, чтобы проверить выбранное значение.

$('#worldSelected').change(function(){
    console.log($(this).val());
});

это будет регистрировать значение selectbox каждый раз, когда будет выбрано новое значение. Вы также можете добавить этот код выше своего определения функции currentWorlds. Примечание. Для этого требуется добавить библиотеку jquery. Как я уже отмечал из кода, который вы опубликовали, вы использовали jquery. Поэтому я предполагаю, что вы связали его в своем файле.

Поделиться
  • 0
    Я добавил в код, и он ничего не выходит из системы. Кажется, что идентификатору worldSelected не присваивается какое-либо значение для него на основе опции, которую я выбираю.
  • 0
    Вы можете щелкнуть правой кнопкой мыши на поле выбора и щелкнуть по элементу проверки. В инструментах разработчика вы можете найти необработанный HTML-код для вашей страницы. проверьте, что опции и поле выбора были назначены идентификаторы оттуда.
Показать ещё 3 комментария
0

Вы можете использовать это прямо в своем коде:

function currentWorlds()
    {
      var string = document.createElement('select');
      string.setAttribute('id', 'worldSelected');
      var string1;

      for(var i=0;i<universe.name.length;i++)
       {
            string1 = document.createElement('option');
            string1.value = i;
            string1.text = universe.name[i];
            string.appendChild(string1);
       }

        document.getElementById('universeOptions').appendChild(string);

    }
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню