使用 javascript 禁用下拉菜单

Question

我有两个下拉名称作为产品和产品线，两者都相互依赖，因此在选择任何产品后，只有产品线下拉菜单将启用。 示例结构如下。

<select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products</option>
<option value="AA">Product1</option>
<option value="BB">Product2</option>
<option value="BB">Product3</option>
</select>
<select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="">
<option value="">All products Line</option>
<option value="CC">ProductLine1</option>
<option value="DD">ProductLine2</option>
<option value="EE">ProductLine3</option>
</select>

<SCRIPT>

document.addEventListener("DOMContentLoaded", function() {  
  checkDropdownvalue();
});

function disableProductline() { 
    document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
}

function checkDropdownvalue() {
  document.querySelector('select[name="abb_sf_partners-product"]').onchange = (e) => {
    var selectedProductline = e.target.value;
    alert(e.target.value) 
                
    if (selectedProductline == "AA") {
      disableProductline();
    }   
  }
}

</SCRIPT>

在产品下拉列表中的 AA 的 select 上，需要禁用 ProductLine 下拉列表。

但我猜是由于一些 razor 视图更改产品线下拉菜单不断启用，因为产品线中的数据是动态插入的

那么有什么方法可以让我的代码在最后执行以禁用它。

Answer 1

你可以试试这个方法。

 document.addEventListener("DOMContentLoaded", function() { checkDropdownvalue(); }); function checkDropdownvalue() { const productSelect = document.querySelector('[name="abb_sf_partners-product"]'); const productLine = document.querySelector('[name="abb_sf_partners-product-line"]') productSelect.addEventListener('change', function(e) { if (e.target.value === 'AA') { productLine.disabled = true; } else { productLine.disabled = false; } }); }

 <select name="abb_sf_partners-product" data-abb-sf-productelement="" class="abb-select"> <option value="">All products</option> <option value="AA">Product1</option> <option value="BB">Product2</option> <option value="BB">Product3</option> </select> <select name="abb_sf_partners-product-line" data-abb-sf-productelement="" class="abb-select" disabled="true"> <option value="">All products Line</option> <option value="CC">ProductLine1</option> <option value="DD">ProductLine2</option> <option value="EE">ProductLine3</option> </select>

Answer 2

正如在我的案例中提到的，由于某些 razor 查看代码，产品线下拉菜单已启用。 为了解决这个问题，而不是在产品下拉列表更改时比较产品的价值，我已经在产品线下拉列表上进行了比较，例如如果我将鼠标悬停在产品线下拉列表上，然后触发一个事件来检查所选产品并将其与我想要的一个（我没有使用 onClick 暂时（几毫秒）它打开下拉菜单然后禁用它）我使用下面的 JS 脚本来实现这一点。

document.addEventListener("DOMContentLoaded", function() 
{  
document.querySelector('select[name="abb_sf_partners-product-line"]').onmouseover = function fun() {
       
        var selectedproduct =  getSelectedProduct();
        /* alert(selectedproduct.value); */
        if(selectedproduct.value == "AA")
        {
            document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = true;
        }
        else 
        {
            document.querySelector('select[name="abb_sf_partners-product-line"]').disabled = false;
        }  
           
         
    }
  
});

function getSelectedProduct(){
var sel = document.querySelector('select[name="abb_sf_partners-product"]');

 var selectedP =  getSelectedOption(sel);
 
 function getSelectedOption(sel) {
        var opt;
        for ( var i = 0, len = sel.options.length; i < len; i++ ) {
            opt = sel.options[i];
            if ( opt.selected === true ) {
                break;
            }
        }
        return opt;
    }
return selectedP    
}

我希望它会帮助某人大声笑。