如何使用javascript填充HTML选择列表

如何解决如何使用javascript填充HTML选择列表

|| 我对HTML和javascript很陌生。我知道这段代码已经存在于互联网上，但是我无法为我工作。我在这个问题上停留了2-3天。如果您能帮助我，我将非常高兴。这是我的问题我想基于optPostAppliedFor的选定条目填充optCategory选择列表。为此，当我单击“ 1”列表时，我调用了一个函数change_categoriees（key）。代码如下

<tr>
    <td width=\"40%\" align=\"right\" nowrap>
        <strong>
            Post Applied for<span class=\"text11red\">*</span> : 
        </strong>
    </td>
    <td width=\"60%\">
        <select name=\"optPostAppliedFor\" class=\"flat\" onclick=\"change_categories(0);\" />&nbsp;&nbsp;&nbsp;
            <option value=\"\">--Select--</option>
            <?php
            foreach($App[\'post_applied_for\'] as $key => $val){
                echo \'<option value=\"\'.($key).\'\">\'.$val.\'</option>\';
            }
            ?>
        </select>
    </td>
</tr>

这是默认输入的optPostAppliedFor和ѭ0default的PHP代码

$App[\'post_applied_for\'] = array(
    \'Lecturer\'         => \'Lecturer\',\'Business Analyst\' => \'Business Analyst\',\'Deepender good\'   => \'Deepender good\'
);
$App[\'category\'] = array(
    \'Category1\' => \'Category1\',\'Category2\' => \'Category2\',\'Category3\' => \'Category3\'
);

请告诉我如何执行此功能，以实现我的目的。我试过了，但徒劳无功。

function change_categoriees(key) {
    alert(\'asdasd\');

    var z = document.getElementById(\'optCategory\');
    var x = document.getElementById(\'optPostAppliedFor\');
    var y = document.createElement(\'option\');

    var display = x.options[x.selectedIndex].text;
    var option = x.options[x.selectedIndex].value;

    y.text = display;
    y.value = option;

    try {
        z.add(y,null);
    } catch(ex) {
        z.add(y);
    }

    z.options[0].text = \'* \'+(z.length-1)+\' selected *\';
}

解决方法

我不太确定，但是... change_categoriees方法中的这两行看起来有问题：

var z = document.getElementById(\'optCategory\');
var x = document.getElementById(\'optPostAppliedFor\');

为了使这些语句返回某些值，您的HTML需要具有名称为optCategory和optPostAppliedFor的id属性：

<select id=\"optPostAppliedFor\">

还要注意，PHP代码在服务器的后端运行。浏览器中运行的javascript无法直接调用PHP。 , 如果我正确解释了您的代码，那么您确实会遇到一个小问题：您要将变量放入PHP代码中，希望客户端（浏览器）可以使用该变量。这不是它的工作方式。 PHP中的变量仅存储在服务器端。因此，如果仅将JavaScript存储为变量，则Javascript（位于浏览器端）将无法以任何方式使用它：它们将位于服务器内存中，而不位于客户端的内存中。这里有两种解决方案： 1°）将要使用的变量放在PHP生成的网页中。例如，您可以使用隐藏字段，然后“取消隐藏”相关字段。但是，如果您有很多变量，那不是很实用。 2°）可以使用AJAX解决方案：基本上，这个想法是通过Javascript调用一个PHP脚本，该脚本将发送回信息（格式为纯文本，XML或JSON）。在此，当用户单击第一个列表时，您发送一个请求（POST或GET），在该请求中，您将通知服务器有关用户选择的信息。例如，您将要求提供与“ Business Analyst”选项相关的类别。我们将分析PHP脚本“申请的帖子”，并相应地发送类别列表的内容。由于所有操作都是通过Javascript和PHP完成的，因此在此期间将不会重新加载页面，因此页面相对流畅。我建议使用Javascript库使事情变得容易一些。 jQuery是最受欢迎的选择之一，您会在Web上找到很多帮助和示例。 , 可能您正在寻找AJAX方法？例如。您向key（用户在optPostAppliedFor中选择）使用GET或POST变量将请求发送到某些PHP文件（用户在optPostAppliedFor中选择），并且PHP脚本回显了所需的结果，因此JS可以使用它。例如，使用jQuery时，将如下所示：

$(\"select[name=optCategory]\").load(\"myUberScript.php\",{ key: $(\"select[name=optPostAppliedFor]\").attr(\"selected\") });

myUberScript.php：

<?php
  $key = $_POST[\'key\'];

  if (isset($key))
  {
    if ($key == \'moo\')
      echo \"<option>moo</option>\"; else
    if ($key == \'foo\')
      echo \"<option>foo</option>\";
  }
?>

我认为这将是最好的方法，但是我不确定我的.attr(\"selected\")选择器。并且我建议您阅读\'bout AJAX和jQuery-这些在进行Web开发时非常有用=）那么，这个JS做什么呢？它找到名称为optPostAppliedFor的select标记，获取所有\'selected \'项（请确保验证代码-我不确定），将POST请求发送到myUberScript.php，并将该值作为$_POST[\'key\']参数传递，获取响应，找到名为“ 0”的div并将其内部HTML代码设置为PHP \的响应。很好，是吗？ =）我建议采用这种方式，因为用户在javascript中获取所有内部数据并不总是那么好-用户可以看到该数据，并且如果有很多数据，页面将被缓慢加载。第二：您可以随时管理/编辑/更新/修改（选择正确的）PHP代码。第三：PHP代码具有更多用于安全验证用户数据的功能，还有更多功能。但是有一个很大的缺点：如果用户在浏览器中禁用了JS支持，您将无法做到这一点。注意：这是一种非常罕见的情况，当用户禁用JS =） ,第一个问题是，在您的PHP代码中，您不正确地关闭了select标签，就像这样，

<select ... />
    ...
</select>

那可能会导致一些错误。应该是这样，没有额外的/，

<select ... >
    ...
</select>

另一个问题是，您要像这样拼写函数调用，

onclick=\"change_categories(0);\"

但是您这样拼写了函数名称，

function change_categoriees(key) {...}

请注意\“ categoriees \”中多余的\“ e \”。因此，您实际上并未正确调用该函数。看起来其他人也有一些答案，因此我将最后提供一些有关开发工具和文档的建议。对于开发工具而言，Firefox Firebug非常出色，它可以让您调试css，html和javascript。我还听说过有关Chrome中的开发工具的好消息。实际上，所有最新的浏览器版本都具有某种开发工具，并且都非常不错。接下来，Mozilla文档是进行Web开发的好资源。您可能也有兴趣查看w3fools.com中提到的资源。另外，将来，当在Stack Overflow上共享代码时，您应该考虑与jsFiddle共享一个实时示例。哦，等等，在我忘记之前，您还应该使用文本编辑器或IDE来进行语法高亮显示，甚至可以进行语法校正。我有一个用于Windows的简单文本编辑器，称为Notepad ++，尽管还有许多其他编辑器。

如何使用javascript填充HTML选择列表

如何解决如何使用javascript填充HTML选择列表

解决方法

相关推荐