Question

我使用以下代码根据选择框中项目的选择隐藏节目

代码工作正常，其中一个问题是当项目已被选中时，它不会打开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>

JS代码：

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

Answer 1

要解决此问题，您必须手动触发change事件一次，

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

DEMO

Answer 2

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

<强> DEMO

jQuery：

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();
   });
});

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

2 个答案:

DEMO