Javascript 基于另一个选择选项禁用选择选项

我有两个选择：

<select id="select_1" name="tipo_carta">
 <option value="1">90gr</option>
 <option value="2">150gr</option>
 <option value="3">270gr</option>
</select>

<select id="select_2" name="stampa">
 <option value="0">Fronte</option>
 <option value="1">Fronte e Retro</option>
</select>

当我从select_1中选择选项270gr时，我将从select_2中禁用选项Fronte e Retro

我怎样才能做到这一点呢？

试试这个

$('#select_1').change(function(){
  if($(this).val() == 3){
    $('#select_2').find('option:eq(1)').prop('disabled',true);
  }else{
     $('#select_2').find('option:eq(1)').prop('disabled',false);
  }
});

使用下面的

$('#select_1').change(function() {
   if($(this).val() == '3') {
        $("#select_2 option:contains('Fronte e Retro')").attr({disabled:true});
    } else {
       $("#select_2 option:contains('Fronte e Retro')").attr({disabled:false});
    }

---

})

由于其他答案并不完全“简洁”，而且大多基于jQuery，我：

将它放在domready中或初始化UI事件的任何位置

对于非常旧的Mootools版本，您必须更加详细：

$('select_1').addEvent('change', function(e) {
    $$('#select_2 option[value=1]').each(function(el){ el.disabled = (e.target.value == 3);});
});

---

---

您应该使用prop而不是attr here和option[value=1]，而不是检查我尝试过但不起作用的内容。我把这些叫做select，也用来做其他事情。你可以在这里使用se@monak83：这是因为你把变化称为l。添加select l之前的378事件。694到页面。。。您有两个选项：要么在页面底部调用脚本，要么将其嵌入$document.ready调用…然后使用$'select_1'。live'change'，函数{我已经尝试过，但不起作用。.您可以在此处检查：[link]选择是：选择20并选择_11@bipen：这不是阻塞点…这是添加另一个事件，但带有更改事件的代码在选择器检查l.378中有字符…不，我的意思是…我们的代码很好…我查看了is view source，发现他在其他代码中有不正确的选择器..这破坏了脚本和我们的代码不工作..检查第337347行..以此类推..@bipen是的，我看到了这一点，但另一点也被阻塞了…但是我重新阅读了代码，我发现OP使用的是mootools，而不是jquery！！！因此，l.337等中的代码可以正确地与mootools一起工作，但这是我们建议不工作的代码…我刚才看到了看看你的源代码，你不是在使用jQuery，而是在使用mootools->我将重新标记这个问题，但因此那里的答案不正确，因为我们都假设你在使用jQuery！@samuelcailerie我很乐意添加一个合适的解决方案，但是你是如何从这一小块HTML中看到这一点的？另外，我刚刚从标题中删除了“jQuery”-在重新标记后有点困惑；@Niels Keurentjes我从他在下面的解决方案评论中提供给我们的网站上看到了这一点……你的mootools解决方案比我的要好得多！：是的，我后来在别处看到了他的网站链接，呵呵。最后，有理智的人：为了性能目的，我将$$更改为document.getElement，没有nee我希望有一个集合和迭代器，以防这样的性能实际上不是一个问题，所以我追求最大的可读性和简洁性：当然，但我讨厌留下无效的代码，这是懒惰的，意味着你不总是想清楚事情的来龙去脉——当性能确实重要并遇到麻烦时，很容易做到同样的事情。我已经尝试过了但是dosen不起作用…这里您可以测试：[link]您可以从我文章中的链接看到代码起作用，您遇到了另一个问题。如果打开开发人员控制台，您将看到一个明显的未捕获错误：InvalidCharacterError:DOM Exception 5错误，该错误导致页面上的所有其他Javascript都无法工作。

$('select_1').addEvent('change', function(e) {
    $$('#select_2 option[value=1]').each(function(el){ el.disabled = (e.target.value == 3);});
});