Question

我对HTML和javascript很新。我知道这个代码已经存在于互联网上，但我无法让它为我工作。我坚持这个问题2-3天。如果你能帮助我，我会很高兴。

这是我的问题我想根据optCategory的所选条目填充optPostAppliedFor选择列表。为此，当我单击optPostAppliedFor列表时，我调用了函数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和optCategory

的默认网址的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 *';
}

Answer 1

您可能在寻找AJAX方法吗？例如。您使用GET或POST变量向key（用户在optPostAppliedFor中选择）和PHP脚本 echo'es 发送一些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")选择器。我建议你阅读一些'回合AJAX和jQuery - 这些在网络开发时非常有用=）

那么，这个JS做了什么？它会找到名为select的{{1}}代码，获取所有“已选中”的项目（确保验证代码 - 我不确定），发送POST请求将 myUberScript.php 传递给optPostAppliedFor参数，得到响应，找到名为$_POST['key']的div并将其内部HTML代码设置为PHP的响应。太好了，对吧？ =）

我推荐这种方式，因为用户在javascript中获取所有内部数据并不总是好的 - 用户可以看到该数据，如果有大量数据，页面会加载缓慢。第二：您可以随时管理/编辑/更新/修改（选择正确的）您的PHP代码。第三：PHP代码具有更多功能，可以安全地验证用户的数据以及更多。但是有一个很大的缺点：如果用户在他的浏览器中禁用JS支持，你将无法做到这一点。注意：当用户禁用JS =）

时，这种情况非常罕见

Answer 2

我不太确定，但是......

change_categoriees方法中的这两行看起来有问题：

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

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

optPostAppliedFor

另请注意，PHP代码在服务器的后端运行。浏览器中运行的javascript无法直接调用PHP。

Answer 3

如果我正确地解释你的代码，你确实有一个小问题：你在PHP代码中放置变量，你希望客户端（浏览器）使用它。这不是它的工作方式。 PHP中的变量仅存储在服务器端。所以Javascript（在浏览器端）不能以任何方式使用它，如果你只将它们存储为变量：它们将在服务器内存上，而不是在客户端上。这里有两种解决方案：

1°）您将要使用的变量放在PHP生成的网页中。例如，您可以使用隐藏字段，然后“取消隐藏”相关字段。但如果你有很多变数，那就不太实际了。

2°）你可以使用AJAX解决方案：基本上，我们的想法是通过Javascript调用一个PHP脚本来发送回信息（格式化为纯文本，XML或JSON）。在这里，当用户点击第一个列表时，您发送一个请求（POST或GET），您将通知服务器有关用户的选择。例如，您将要求选择与“业务分析师”选项相关的类别。 PHP脚本我们将分析“申请的帖子”并相应地发送类别列表的内容。因为一切都是通过Javascript＆amp; amp; PHP，在这段时间内页面不会被重新加载，所以它相对流畅。

我建议使用Javascript库让事情变得更容易一些。 JQuery是最受欢迎的选择之一，你会在网上找到很多帮助和示例。

Answer 4

作为第一个问题，在您的PHP代码中，您不正确地关闭了select标记，就像这样，

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

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

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

另一个问题，你拼写你的函数调用，

onclick="change_categories(0);"

但是你拼错了你的功能名称，

function change_categoriees(key) {...}

注意“类别”中的额外“e”。所以你实际上并没有正确地调用这个功能。

看起来其他人也有一些答案，所以我将通过提供开发工具和文档的一些建议来完成。对于开发工具，Firefox Firebug非常出色，它可以让你调试css，html和javascript。我也听说过Chrome中的开发工具。事实上，所有最新的浏览器版本都有某种开发工具，而且它们都很不错。

接下来，the Mozilla docs是一个很好的Web开发资源。您可能还有兴趣查看w3fools.com中提到的资源。

此外，将来在Stack Overflow上共享代码时，您应该考虑与jsFiddle共享一个实例。

哦，等等，在我忘记之前，您还应该使用文本编辑器或an IDE为您做语法高亮，甚至语法校正。我使用一个名为Notepad++的简单文本编辑器用于Windows，但还有很多其他文件编辑器。

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

4 个答案: