禁用(灰显)父类别并使其不可选

时间:2014-01-12 03:55:05

标签: html option

我有一个多选,我想禁用父类别被转移,我很长时间都在努力。

请看图片,我想用任何代码禁用黄色的(我使用的是wordpres) enter image description here

我以某种方式工作并且在窗口加载时无法选择但是当选择子类别时,所有这些都再次启用,任何有关代码的帮助都不能选择 守则是:

         <script type="text/javascript">
window.onload =function () {
var fastInternet = document.getElementById("countrylist");
for (var i = 0; i < fastInternet.options.length; i++) {
    var value = fastInternet.options[i].value;
   if(value == '47' || value == '52'  || value == '57'   || value == '61' )  {
        //need to hide this
        fastInternet.options[i].setAttribute("disabled", "disabled");

    }

    }
  };
</script>

1 个答案:

答案 0 :(得分:1)

在不阅读代码的情况下,以下两种方法可以使<option>无法选择。

  1. 使用<optgroup>

    <select>
      <optgroup label="Category 1">
        <option>Option 1</option>
        <option>Option 2</option>
      </optgroup>    
      <optgroup label="Category 2">
        <option>Option 3</option>
        <option>Option 4</option>
      </optgroup>
    </select>
    

    Documentation @ MDN

  2. 如果你不能使用<optgroup> - 标签,那么只需禁用不应该选择的选项:

    <option disabled>an option</option>
    
  3. <小时/> 您澄清说您需要使用JS,我将假设jQuery可用:

    $("#myselect option").each(function(el) {
        if($(this).text().slice(0, 2) != "--") {
            $(this).attr('disabled', true);
        }
    });
    
    $("#myselect option:not([disabled])").first().attr("selected", "selected");
    

    背后的逻辑是,我们检查每个<option>是否内部文本不以--开头。如果这是真的,则它是一个类别(根据您的屏幕截图),我们禁用此选项 最后要记住的是,我们之后需要选择一个非禁用选项,否则在网站加载时会自动选择一个类别。

    请参阅fiddle