Question

我刚刚开始使用Javascript，所以这可能听起来像一个菜鸟问题。我想打印一个选择表单元素。但我正在我的代码的javascript部分执行它，因为必须从脚本中的数组访问选项列表。我在HTML部分中使用了div元素来输出这个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>

我只包含了我似乎遇到问题的相关代码。在这种情况下，Universe是一个具有名为name的数组属性的对象。这些名称是我想要显示的选项，并且基于用户的输入，想要处理。在我选择之后，我似乎无法保存选择选项的ID。这意味着当我在console.log中输入worldSelected的值时，它会输出一次0。选择新选项后，不会输出任何内容。有什么我想念的吗？帮助将不胜感激！

谢谢！

Answer 1

使用jquery来检查所选值。

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

每次选择新值时，这都会记录选择框的值。您也可以将此代码添加到currentWorlds函数定义之上。注意：这需要您添加jquery库。正如我已经发布的代码所述，您使用过jquery。所以我假设你已将它链接到你的文件中。

Answer 2

我会稍微编辑一下代码...尝试一下，让我知道它是否有效：

Fiddle test here

在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());
    });
});

Answer 3

您可以直接在代码中使用它：

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

    }

从Javascript输出HTML表单元素

3 个答案: