从 Javascript 输出 HTML 表单元素答案

【问题标题】：Output HTML Form Element From Javascript从 Javascript 输出 HTML 表单元素
【发布时间】：2014-04-19 18:40:57
【问题描述】：

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

<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。这意味着当我控制台记录 worldSelected 的值时，它会输出一个 0，一次。选择新选项后不输出任何内容。有什么我想念的吗？帮助将不胜感激！

谢谢！

【问题讨论】：

您能在您记录所选世界的位置添加代码吗？并且 0 可能是您选择第一个元素的结果。你的第一个元素的 id 是 0。因为我在循环中从 0 开始
在我调用 currentWorlds() 函数之后，它就在主 javascript 函数中。 ' console.log("选择的世界是"); console.log(document.getElementById("worldSelected").selectedIndex); '
检查我刚刚发布的答案。

标签： javascript html forms select

【解决方案1】：

使用 jquery 对其进行编码以检查所选值。

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

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

【讨论】：

我在代码中添加了它并没有记录任何内容。似乎没有根据我选择的选项为 worldSelected id 分配任何值。
您可以右键单击选择框并单击检查元素。在开发人员工具中，您可以找到页面的原始 html 代码。检查选项和选择框是否已从那里分配了 ID。
只是为了澄清一下，通过使用 div 将 select 元素作为字符串输出，它会像 HTML 表单元素一样正常工作吗？还是我必须以其他方式对其进行操作，以便它接受用户的输入？
这是一种输出 html 的方法，并且通常似乎可以工作。但是您也可以使用 jquery 库添加元素，该库有很多方法可以做到这一点。 .append() like api.jquery.com/append 是一个很好的方法。但他们都做同样的事情。你能用chrome开发者工具找到id吗？
是的，我设法看到分配给选项和选择框的 ID。 worldSelected 的 id 没有附加任何值。我在谷歌上搜索答案，我认为当用户选择一个选项时，我必须将一个事件处理程序附加到选择选项。但我不太确定。

【解决方案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());
    });
});

【讨论】：

它似乎没有注销任何东西。
@Saima - 抱歉更新了 Jsbin 链接 - jsbin.com/fikusalu/1/edit?html,js,console,output
是的！有用！感谢您的帮助。另外澄清一下，您使用的 .append、.attr 和 .text 方法是否用于操作 id？他们到底是做什么的？
@Saima：好东西。不，他们不会对 id 本身做任何事情，.append() 查看指定的元素，在这种情况下通过它的 id，然后将选项元素附加到它，.attr() 访问属性“值”刚刚附加的选项元素并为其赋予值“i”，对于 .text() 也是如此，它访问选项元素的文本并在当前位置添加 Universe.name 的值。不要忘记接受！那当然是如果你接受答案:)

【解决方案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);

    }

【讨论】：