jQuery - 单击LI的Open SelectBox，选择触发复选框时选项

Question

我有一个新问题，经过一些测试和研究后无法解决。

我有几个选择框嵌套在几个 ul>li 中，如下所示：

<ul>
    <li>
<span class="select">

<input type="checkbox" name="kurse[]" value="" />

<select name="numbers1"  value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
    <li>
        <input type="checkbox" name="kurse[]" value="" />
<span class="select">

<select name="numbers2"  value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
    <li>
        <input type="checkbox" name="kurse[]" value="" />
<span class="select">

<select name="numbers3" value="">
  <option value="">Bitte w&auml;hle eine Option...</option>
  <option value="Option1">Option1</option>
  <option value="Option2">Option2</option>
  <option value="Option3">Option3</option>
</select>
</span>

    </li>
</ul>

现在我的 Javascript 通过单击一个 li 来触发嵌套复选框。这是脚本：

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).toggleClass('active').siblings();
    jQuery(this).find('input').prop('checked', function () {
        return !this.checked;
    });
});

我必须添加选择框，现在我想打开嵌套在已单击的 li 中的选择框。选择一个选项后，我想要嵌套在同一个 li 内的复选框“单击”。

通过编辑上面的代码，我得到了这样的结果：

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).find('select').prop(function () {
        jQuery(this).trigger('click');
    });
});

但这不起作用，因为我缺乏 jQuery 知识。

对此有什么建议吗？是否可以使用一些 jQuery，或者我需要更改为 Chosen 或类似的东西吗？

这是一个小提琴：

http://jsfiddle.net/QHv6B/1/

Answer 1

我刚刚编辑了您的 jQuery 代码，并在您的 html 中更改了两行以使其正常工作。

JSFiddle

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).toggleClass('active').siblings();
});

jQuery(document).on('click', 'ul li', function () {
    jQuery(this).find('select').prop(function () {
        jQuery(this).trigger('click');
    });
});

jQuery(document).on('change', 'select', function () {
    var selectedItem = $(this).find('option:selected').attr('value');
    var checkBox = $(this).prev();
    if (typeof selectedItem === 'undefined' || selectedItem === "") {
        alert("You must select an option");
        $(checkBox).prop('checked', false);
    } else {
        $(checkBox).prop('checked', true);
    }
});