隐藏选择选项

Question

我希望隐藏选项菜单中的部分值： 如果有意义的话，值[DB-2676]应该通过将其颜色更改为白色来隐藏它。选项菜单上的所有值都列为{2个字母} - {4个数字}。 不知道如何使用正则表达式从文本字符串中仅选择部分值。

<select name="seletion2" class="form-control">
  <option value="size 24x24x54>color>red> CP-2376">size 24x24x54&gt;color&gt;red&gt; DB-2376</option>
  <option value="size 24x24x54>color>red> CP-2376">size 24x24x54&gt;color&gt;red&gt; DB-2522</option>
</select>

Answer 1

<强>解决方案

这是一个解决方案，它将编辑包含属性amendValue =“true”的每个OPTION的值，否则它将忽略它。

我有点困惑的是为什么不能用产生下拉的后端语言处理这个问题：

PHP示例：

echo "<option value=\"" . $myVal . "\">".$myVal."</option>";

会变成类似

的东西

echo "<option value=\"" . $myVal . "\">". substr($myVal, strlen($myVal)-7)."</option>";

哪个会为您提供相同的HTML输出：

<option value="size 24x24x54>color>red> CP-2376">size 24x24x54>color>red></option>

然而，当你问到如何使用JavaScript完成这项工作时，我已经为你做了一个简短的脚本来演示它的工作原理，我添加了一个名为“amendValue”的属性，这只是为了区别于其他选项元素，否则它将修剪网页上显示的每个<option>

var intCharactersToDelete = 7;
function funStart(){
  var el = document.getElementsByTagName("option");
  for (x = 0; x < el.length; x++){
    var AttAmend = el[x].getAttribute("amendValue");
    if (AttAmend == "true"){
      var strValue = el[x].innerHTML;
      strValue=strValue.substring(0,(el[x].innerHTML.length  - intCharactersToDelete));
      console.log(strValue);
       el[x].innerHTML = strValue;
    }
  }
}
document.addEventListener("DOMContentLoaded", funStart,false);

<select name="seletion2" class="form-control">
  <option amendValue="true" value="size 24x24x54>color>red> CP-2376">size 24x24x54&gt;color&gt;red&gt; DB-2376</option>
  <option amendValue="true" value="size 24x24x54>color>red> CP-2376">size 24x24x54&gt;color&gt;red&gt; DB-2522</option>
</select>