Question

我有以下代码，我希望使用HTML select / option标签从MySQL中提取数据，当选择时自动发布到屏幕上（没有提交按钮）。在我的数据库中，我有3列：ID，术语和定义。我希望将词汇表术语发布在标题中，并将定义发布在我在下面创建的展开/折叠区域中。最终，$ entries数组中的所有值都将位于我的数据库中的“terms”列下，并且我将在“def”列中定义它们。这是代码：＆lt;？php //ex_col.php require_once“functions.php”; echo“＆lt;！DOCTYPE html＆gt;＆lt; html＆gt;＆lt; head＆gt;” 。 “＆LT;标题＆GT;术语＆LT; /标题＆gt;” 中。 “＆lt; link rel ='stylesheet'type ='text / css'href ='ex_col.css'＆gt;” 。 “＆lt; link rel ='stylesheet'type ='text / css'href ='styles.css'＆gt;”; $ entries = array（“Stamping”，“Aemh”，“Tossing”，“Polish”，“Golden Room，The”，“Representative”，“Soria”，“Mala”， “Great Sorian Waterfall，The”，“Krana Rite，The”，“'Under Ee-o！'”，“Indesance”，“Nahx”，“Mahx”，“Frod Uto”， “Hezago”，“Tezamo”，“Oral Account，The”，“Majik”，“King's Line，The”，“Royal Heirarchy，The”，“Outcome，The”，“Winding Down，The”， “God Spectrum，The”，“God Plains，The”，“God Complex，The”，“Snoum”，“Universal Hemisphere，The”，“Eeah Ooah”，“Stana”，“Topi”， “Gatee”，“Utopians”，“Yahdah”，“Ooah”，“Uto”，“Saromo”，“Jahep”，“Holy Books”，“Tribel”，“Myo”，“Reto”，“Otherword”， “年代的战争，”，“父亲，”，“传说，”，“滚动，”，“Piama”，“公顷”，“风的力量”，“故事的儿子，”， “Leena”，“Gatia-Ma”，“Gesmoa”，“Kasalia”，“Resa-Mo”，“Resa Piama”，“Zesma”，“Higher Structure，The”，“Finish，The”，“Season”， “日历，”，“虚空，”，“海湾，”，“分区，”，“负荷，”，“铁道银河，”，“阅读”，“古人，”， “Auretchen”，“Brado”，“父亲之战”，“'选择一个'”）; 排序（$条）; echo“＆lt; main＆gt;＆lt; h2＆gt;术语表＆lt; / h2＆gt;”; echo'＆lt; form action =“ex_col.php”method =“POST”name =“entries”＆gt;＆lt; select name =“term”＆gt;'; for（$ i = 0; $ i＆lt; count（$ entries）; $ i ++） { echo'＆lt; option value =“'。（$ i + 1）。'”＆gt;' 。 $ entries [$ i]。 '＆LT; /选项＆GT;'; } echo'＆lt; / select＆gt;＆lt; / form＆gt;'; echo＆lt;＆lt;＆lt; _END ＆lt; input id =“toggle”type =“checkbox”checked＆gt; ＆lt; label for =“toggle”＆gt;＆lt; / label＆gt; ＆lt; div id =“expand”＆gt; ＆lt;节＆GT; ＆LT p为H.;＆LT; / p为H. ＆LT; /节＆gt; ＆LT; / DIV＆GT; ＆lt;节＆GT; ＆LT; H3将N＆LT; / H3＆GT; ＆LT; /节＆gt; ＆LT; /主＆GT; _结束; ？＆GT; ＆LT; /体＆GT; ＆LT; / HTML＆GT; 如果它有任何相关性，这是我的ex_col.css： @import url（http://fonts.googleapis.com/css?family=Open+Sans:400,700）; 身体 { font-family：“Open Sans”，Arial; 背景：#CCC; } 主{ 背景：#EEE; 宽度：600px; 保证金：20px auto; 填充：10px 0; box-shadow：0 3px 5px rgba（0,0,0,0.3）; } h2 { text-align：center; } p { font-size：13px; } 输入{ display：none; 能见度：隐藏; } 标签 { 显示：块; 填充：0.5em; text-align：center; border-bottom：1px solid #CCC; 颜色：＃666; } label：悬停{ 颜色：＃000; } label :: before { font-family：Consolas，monaco，monospace; font-weight：bold; font-size：15px; 内容：“+”; vertical-align：text-top; display：inline-block; 宽度：20px; 身高：20px; margin-right：3px; 背景：径向梯度（椭圆在中心，＃CCC 50％，透明50％）; } #expand { 身高：0px; 溢出：隐藏; 过渡：高度0.5s; / * background：url（http://placekitten.com/g/600/300）; * / 颜色：#FFF; } 部分 { 填充：0 20px; } #toggle：checked~＃expand { 身高：250px; } #toggle：checked~label :: before { 内容：“ - ”; } 我也有我的functions.php连接成功，但我怎样才能达到预期的效果呢？

Answer 1

要在用户从选择下拉菜单中选择一个选项时显示数据，您需要使用少量java脚本。

你需要创建一个onchange DOM事件并调用一个javascript函数，该函数应该从数据库中获取数据（使用php文件）并更新输出。这是一个样本。

function myfun()
{
  valu = $('#myselect').val();
  $.get('phpfile.php?id=' + valu, function(data)
    {
      $('#resultdiv').html(data);
    }
    );
}

<select id="myselect" onchange="myfun()">
  <option value="1"> Some option </option>
  <option value="2"> Some option 2 </option>
</select>
<div id="resultdiv"></div>

因此，当用户选择一个选项时，将触发javascript函数。

然后，所选的选项值存储在名为valu的变量中。

然后通过GET方法（通过url）将所选值传递给php文件。

然后php文件将返回一个结果（html片段或文本），该结果存储在名为data的变量中。

然后更新结果div。

使用<select>标签从数据库发布信息而不提交按钮

1 个答案: