Question

我使用以下代码使jquery显示/隐藏，但不知何故它不起作用，甚至没有警告显示在此

<div class="col-md-3 clr">
          <label class="clr">License Type</label>
          <div class="clr">
            <select name="licenseType" id="licenseType" multiple>
              <option value="Truck License">Truck License</option>
              <option value="Car License" selected>Car Licence</option>
              <option value="Two Wheeler">Two Wheeler</option>
              <option value="Four Wheeler">Four Wheeler</option>
              <option value="Six Wheeler">Six Wheeler</option>
              <option value="Eight Wheeler">Eight Wheeler</option>
              <option value="Special License" class="special">Special License</option>
              <option value="Machine Operator License" class="machine">Machine Operator License</option>
            </select>
          </div>
        </div>
        <div class="col-md-9 clr specialLicense">
          <label class="clr">Special Machine Operator Licence Number & Type</label>
          <div class="clr">
            <input type="text" name="licenceSpecialMachine" id="licenceSpecialMachine" placeholder="Special Machine Operator Licence Number" class="form-control" />
          </div>
        </div>

JS代码

 $(".specialLicense").hide();
    $('select[class="special"]').click(function(){
        alert("hi");
        $(".specialLicense").toggle('slow');
    });

Answer 1

如果您的代码在文档就绪调用中，或者在文档的末尾，则可以使用：

$(".specialLicense").hide();
$('select option.special').click(function () {
    alert("hi");
    $(".specialLicense").toggle('slow');
});

<强> jsFiddle example

您想要$('select option.special').click(function () {，而不是$('select[class="special"]').click(function(){。

Answer 2

您目前正在选择select html元素，其类别为special。为此，你需要有一个这样的HTML

<select class="special">

但是你没有那种类型的HTML。所以你需要这个代码

$('select option.special').click(function(){

您需要选择special类的选项。如果单击该类的选项，则会选择要触发的事件。

Answer 3

在document.ready中换行代码并使用select option.special选择器绑定点击事件

<强> DEMO

$(document).ready(function(){
    $(".specialLicense").hide();
    $('select option.special').click(function(){
        alert("hi");
        $(".specialLicense").toggle('slow');
    });
});

Answer 4

正如@RashminJaviya所说，在DOM加载后执行你的jQuery很重要。（或者你可以delegate你的事件监听器。）

此外，我建议使用change()检测选择列表的任何更改，而不是click()来检测任何选项的点击。

似乎您希望在选择特定选项时显示字段，并且希望在选择任何其他选项时隐藏字段。

在这里，我使用$('option:selected',this).hasClass('special')来测试选择列表（special）中所选选项（option:selected）的类（this）。

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

    /* the selection has changed */

    if ($('option:selected', this).hasClass('special')) {

        /* the selected option has a class of "special" */
        $(".specialLicense").show('slow');

    } else {

        /* the selected option does NOT have a class of "special" */
        $(".specialLicense").hide('fast');

    }

});

Working Example

使用jquery进行显示/隐藏工作

4 个答案: