Javascript 如果在选择框中选择了相关项，则打开隐藏的div

我正在使用以下代码根据在选择框中选择的项目进行显示隐藏

代码运行良好，其中一个问题是当项目已被选中时，它不会打开div，我必须删除它，然后再次选择它以打开div

下面是用于此的html和JS代码

<select name="licenseType" id="licenseType" class="licenseType" multiple>

              <option value="1" 
              SELECTED>Truck License</option>

              <option value="2" 
              >Car License</option>

              <option value="3" 
              SELECTED>Two Wheeler</option>

              <option value="4" 
              SELECTED>Four Wheeler</option>

              <option value="5" 
              >Six Wheeler</option>

              <option value="6" 
              SELECTED>Eight Wheeler</option>

              <option value="7" 
              class="special" SELECTED>Special License</option>

              <option value="8" 
              class="machine" >Machine Operator License</option>

            </select>

---

要修复它，您必须手动触发

change

事件一次

 $('select#licenseType').change(function () {
    if ($('option:selected', this).hasClass('special')) {
        $(".specialLicense").show('5000');
    } else {
        $(".specialLicense").hide('5000');
    }
  }).change();

---

您还需要在页面加载上执行该功能：

jQuery：

 $('select#licenseType').change(function () {
    if ($('option:selected', this).hasClass('special')) {
        $(".specialLicense").show('5000');
    } else {
        $(".specialLicense").hide('5000');
    }
  }).change();

function select(){
     if ($('select#licenseType option:selected').hasClass('special')) {
        $(".specialLicense").show('5000');
    } else {
        $(".specialLicense").hide('5000');
    }
}

$(document).ready(function () {
    select();

    $('select#licenseType').change(function () {
       select();
   });
});