php - javascript 小部件与 php 构建二维数组

Question

我正在尝试构建一个小部件，用户可以在不离开小部件的情况下进行一些计算。

我认为这只能在 Javascript 中完成，而不是 PHP 提交表单，这将刷新并重定向小部件内的页面。

我从 PHP 中的 sql 语句生成一个二维数组并将其发送到 Javascript，然后 Javascript 构建表单内容。

假设我构建了 js 二维数组 a_array=[[q1,w1,e1],[q2,w2,e2],...,[qx,wx,ex]];

如何从 JavaScript 构建下拉框 html 内容？

<select ...>
<option value=w1>q1 -e1</option>
<option value=w2>q2 -e2</option>
...
<option value=wx>qx -ex</option>
</select>

在我的 php 脚本中，我尝试将 fm 写入 javascript，但不起作用。

    $fm .= '<select name=\"f\" style=\"width:90%\" onchange=\"this.form.submit()\">';
    $fm .= 'for (i=0; i<m_array.length; i++){';
    $fm .= '\"<option value=\"+m_array[i][0]+\"';
    $fm .= 'if (m_array[i][0] == f )';
    $fm .= ' selected=\'selected\'';
    $fm .= '\">+m_array[$i][0]+\" - \"+m_array[i][2]+\"</option>\"';
    $fm .= '}';
    $fm .= '</select>';
    ....
    echo 'document.write("'.$fm.'")';

Answer 1

您通常使用 DOM 方法 document.createElement(tagName) 在 JavaScript 中创建元素，并使用 el.appendChild(c) 进行追加。您还可以使用innerHTML 创建节点树，如

el.innerHTML = '<p>aaa</p>'

因此，对于您正在做的事情，以下可能是合理的:

// Assume `options` is a JavaScript Array as you described, and `form`
// is a <form> element, as in document.forms.the_form_name.
var sel = document.createElement('select'),
    el;
for (var i = 0, l = options.length; i < l; i++) {
    el = document.createElement('option');
    el.value = options[i][1];
    el.textContent = options[i][0] + ' -' + options[i][2];
    sel.appendChild(el);
}
form.appendChild(sel);