OnChange 功能在禁用 Select 后不起作用

Question

我有一个包含 2 个选择的示例。一旦您更改了第一个中的某些内容，第二个（已禁用）应该更改为启用。到那里我没有问题。问题是，当您在第二个中更改某些内容时，应该会打开一个网页。当我没有将 .disabled 分配给“var urlmenu2”但它不工作时，这工作正常。有人知道会发生什么吗？

这是 HTML 代码：

<select id="menu1" >

<option value="0" selected="selected" id="selected"> Select an option </option>
  <optgroup label="Category1:">
  <option value="1"> Option1 </option>
  <option value="2"> Option2 </option>
  <option value="3"> Option3 </option>
  <option value="4"> Option4 </option>
</optgroup>

<optgroup label="Category2:">
  <option value="5"> Option5 </option>
  <option value="6"> Option6 </option> 
  <option value="7"> Option7 </option>
  <option value="8"> Option8 </option>
  <option value="9"> Option9 </option>
  <option value="10"> Option10 </option>
  <option value="11"> Option11 </option>
  <option value="12"> Option12 </option>
  <option value="13"> Option13 </option>
  <option value="14"> Option14 </option>

<optgroup label="Category3:">
  <option value="15"> Option15 </option>
</optgroup>

</select>

<select id="menu2">
  <option value="0" selected="selected" id="selected2"> Select an option </option>
  <option value="1" id="center">Home</option>
  <option value="2" id="home">In the Center</option>
</select>

这是 Javascript 代码：

 var urlmenu1 = document.getElementById('menu1');
 **var urlmenu2 = document.getElementById('menu2').disabled=true;**

urlmenu1.onchange = function change1(){

    if(urlmenu1.selectedIndex != 0){    
        **var urlmenu2 = document.getElementById('menu2').disabled=false;**
        var selected = document.getElementById('selected').disabled=true;
    }

    if(urlmenu1.selectedIndex >= 1 && urlmenu1.selectedIndex <= 4) {
         var opcion = document.getElementById('casa').disabled=false;
         var seleccionado2 = document.getElementById('selected2').disabled=true;
    } 

    if(urlmenu1.selectedIndex >= 6 && urlmenu1.selectedIndex <= 15){
         var opcion = document.getElementById('home').disabled=true;
         var selected2 = document.getElementById('selected2').disabled=true;
    } 

};

 urlmenu2.onchange = function cahnge2(){

    if(urlmenu1.selectedIndex == 1 && urlmenu2.selectedIndex==1){
        window.open("http://www.google.com",'_self');
        urlmenu1.selectedIndex = 0;
        urlmenu2.selectedIndex = 0;
    } 
     if(urlmenu1.selectedIndex == 2 && urlmenu2.selectedIndex==1){
        window.open("http://www.yahoo.com",'_self');
        urlmenu1.selectedIndex = 0;
        urlmenu2.selectedIndex = 0;
    } 

 etc... until 15

谢谢！

Answer 1

如果您禁用某个字段，该功能也会禁用。尝试手动触发更改事件。

 urlmenu2.change();
 urlmenu2.onchange = function() ....

Answer 2

我通过配置以下 html 代码结束了该问题： select id="menu2" disabled="true" 我写的是 true 而不是 disabled，正如许多人评论的那样网站。

现在出现了一个新问题。根据我在第一次选择中所做的更改的值，我想从第二次选择中禁用选项“casa”或激活它。令人难以置信的是，正确禁用“var seleccionado”没有问题，但是对于其他 var：seleccionado2 或 casita，它不起作用。你认为这可能是什么问题？如果您看到“urlmenu1.onchange(casita.disabled=false);”，我什至试图在您评论 Marcos 时强制触发它但我没有实现它。

谢谢。代码如下：

 var urlmenu1 = document.getElementById('menu1');
 var urlmenu2 = document.getElementById('menu2');
 var desbloqueo = document.getElementById('bloqueo');
 var casita = document.getElementById('casa');

urlmenu1.onchange = function change1(){

    if(urlmenu1.selectedIndex !==0){    
        var urlmenu2 = document.getElementById('menu2').disabled=false;
        var seleccionado = document.getElementById('selected').disabled=true;
        desbloqueo.style.display ='none';
    }

    if(urlmenu1.selectedIndex >= 1 && urlmenu1.selectedIndex <= 4) {
         var seleccionado2 = document.getElementById('selected2').disabled=true;
          urlmenu1.onchange(casita.disabled=false);
    } 

    if(urlmenu1.selectedIndex >= 6 && urlmenu1.selectedIndex <= 15){
         urlmenu1.onchange(casita.disabled=true);
         var seleccionado2 = document.getElementById('selected2').disabled=true;

    } 

};