选择标签不起作用答案

【问题标题】：Select tags not working选择标签不起作用
【发布时间】：2016-12-20 01:22:36
【问题描述】：

我最近在一个网站上工作，我必须能够使用 PHP 在选择标记中动态创建选项。在所有主要浏览器中，当我单击选择表单时，它会显示轻微的单击动画，但不会打开菜单。可以在https://wilsonandsonproductions.com/buy.php?id=0&mode=client 找到一个活生生的例子。 PHP 似乎确实创建了正确的标签，所以我不确定我在哪里犯了错误。以下是部分源代码：

<select name="opt" id="opt">
  <label>Select a  size:</label>
  <optgroup label="Metal Print with Wall Mount">
    <!-- Metal prints in form 0e1, w/ 0 as id & 1 as selected option -->
    <?php foreach($pdata["metal"] as $opt){$o=array_search($opt,$pdata["metal"]); echo '<option value="e'.$o.'">'.$opt["label"].' ($'.$opt["price"].')</option>';} ?>
  </optgroup>
  <optgroup label="Traditional Matted Print">
    <!-- Traditionl Matted prints in form 0a1, w/ 0 as id & 1 as selected option -->
    <?php foreach($pdata["matted"] as $opt){$o=array_search($opt,$pdata["metal"]); echo '<option value="a'.$o.'">'.$opt["label"].' ($'.$opt["price"].')</option>';} ?>
  </optgroup>
</select>

变量 $pdata 是从 json 文件中加载的，包含在此处：

{
"metal" : [
    {
        "label" : "8x10",
        "price" : 75
    },
    {
        "label" : "8x12",
        "price" : 85
    },
    {
        "label" : "8.5x11",
        "price" : 95
    },
    {
        "label" : "10x14",
        "price" : 115
    }
],
"matted" : [
    {
        "label" : "5x7 print inside 8x10 mat",
        "price" : 50
    }
]
}

任何帮助将不胜感激！

【问题讨论】：

您是否有某种形式的点击/键盘按下停止在后台运行？
看起来当您可以实际点击选择时，它会起作用，但您会阻止整个页面的点击，对于任何真正想要这些照片的人来说，这不会阻止他们.. ..
@LeoWilson 您能否将您使用的代码包含在页面上的阻止点击中？
你有document.onmousedown = rtclickcheck;，然后是function rtclickcheck(keyp){ keyp.preventDefault();。因此，您正在阻止用户点击您的页面。这就是为什么当您尝试单击 <select> 时无法打开它...

标签： php html json forms select

【解决方案1】：

您似乎更新了 HTML 以包含具有 label 属性的 optgroup 标记，而不是 label 标记。这很好，因为选择标签只能包含 option 和 optgroup 标签。

允许的内容：零个或多个 <option> 或 <optgroup> 元素。 ¹

您的 javascript 点击处理程序正在停止所有点击（左右按钮）的默认行为，因为它在第一行调用了preventDefault()。

function rtclickcheck(keyp){ 
    keyp.preventDefault();

这很好调用，除非用于所有鼠标点击。您可以使用oncontextmenu 事件处理程序代替onmousedown。所以这一行：

document.onmousedown = rtclickcheck;

可以改为：

window.oncontextmenu  = rtclickcheck;

如果不需要支持IE 8或更早版本，可以使用addEventListener()这种技术，更像event delegation模式：

window.addEventListener('contextmenu', rtclickcheck, false);

您可以在 this jsFiddle 中看到它的实际效果。

【讨论】：