Question

我有两个下拉列表。

    <select id="cat_user">             
     <option value="Super Admin">Super Admin</option>
     <option value="Event Admin">Event Admin</option>
    </select>

    <select id="event_name">             
     <option value="ICT4U">ICT4U</option>
     <option value="Fun Run">Fun Run</option>
    </select>

我希望仅当我们在第一个下拉列表中选择Event Admin时，第二个下拉列表才能启用。如果我们从第一个下拉列表中取消选择Event Admin，它将再次被禁用。

我可以知道如何使用javascript吗？

Answer 1

您只需要处理下拉更改事件。

<script>

$('#cat_user').change(function(){

   if($('#cat_user option:selected').text() == "Event Admin")
   {
     $('#event_name').prop('disabled',false);
   }
   else
   {
     $('#event_name').prop('disabled',true);
   }
 });

</script>

您可以在下面的链接中查看有效的演示

https://jsfiddle.net/t7jswp8r/

Answer 2

如果您不想使用jquery，则可以在Javascript中执行类似的操作，

document.getElementById('event_name').disabled = true;
document.getElementById('cat_user').addEventListener('change', function(event) {
    if(event.target.value === "Event Admin") {
    document.getElementById('event_name').disabled = false;
  } else {
    document.getElementById('event_name').disabled = true;
  }
})

根据另一个下拉列表启用/禁用下拉列表

2 个答案: