jQuery并选择一个选择列表项

时间：2010-10-05 23:39:22

标签： jquery

我是jQuery的新手，在选择列表中的项目时遇到问题。我已经在此post中显示了级联选择框。除了设置默认设置外，一切正常。

问题是我需要在首次加载页面时选择其中一个子项。

代码：

<script type="text/javascript">
    function cascadeSelect(parent, child, childVal) {
        var childOptions = child.find('option:not(.static)');
        child.data('options', childOptions);

        parent.change(function () {
            childOptions.remove();
            child
                    .append(child.data('options').filter('.sub_' + this.value))
                    .change();
        })

        childOptions.not('.static, .sub_' + parent.val()).remove();

        if (childVal != '') {
            child.find("option[value=" + childVal + "]").attr("selected", "selected");
        }
    }

    $(function () {
        cascadeForm = $('.cascadeTest');
        parentSelect = cascadeForm.find('.parent');
        childSelect = cascadeForm.find('.child');

        cascadeSelect(parentSelect, childSelect, "5");
    });
</script>

HTML：

<select class='parent' name='parent' size='10'>
  <option value='1'>Category 1 -></option>
  <option value='2'>Category 2 -></option>
</select>
<select class='child' id='child' size='10'>
  <option class='sub_1' value='5'>Custom Subcategory 1.1</option>
  <option class='sub_1' value='3'>Subcategory 1.1</option>
  <option class='sub_2' value='4'>Subcategory 2.1</option>
</select>

第二个选择列表应显示在右侧框内，但不会显示。

alt text

正在点击child.find调用，但未选择该项。

我做错了什么？

3 个答案:

答案 0 :(得分：1)

您只设置子页列表的值，该列表在页面启动时不可见，因为尚未选择父列表中的任何内容。在你的文档中尝试这样的东西.ready（）：

parentSelect.val("1").change();
childSelect.val("5");

jsfiddle example here

答案 1 :(得分：0)

$(selectList).val(value);

就是这样。您没有已检查的属性，只有值

答案 2 :(得分：0)

编辑：

您的代码存在的问题是您从DOM中删除了每个“子”选项！

childOptions.not('.static, .sub_' + parent.val()).remove();

在您的html中，没有将static作为类的childOptions，因此上面的内容会删除所有现有的childOptions。这就是为什么你在右边看不到任何东西。

否则，您对.data()尝试做什么有点不清楚，但如果删除该行，则默认选择有效：

的 jsFiddle example 

function cascadeSelect(parent, child, childVal) {

    var childOptions = child.find('option:not(.static)');
    child.data('options', childOptions);

    parent.change(function () {
        childOptions.remove();
        child.append(child.data('options').filter('.sub_' + this.value)).change();
    })


    // This like removes all the option!
    // childOptions.not('.static, .sub_' + parent.val()).remove();

    if (childVal != '') {
        child.find("option[value=" + childVal + "]").attr("selected", "selected");
    }
}

$(function () {
    cascadeForm = $('.cascadeTest');
    parentSelect = cascadeForm.find('.parent');
    childSelect = cascadeForm.find('.child');

    cascadeSelect(parentSelect, childSelect, "5");
});

.find() 会查看后代，也许您想 .filter() 所选元素？：

此外，使用.attr("selected", true)和false进行取消选择时，我常常会有更好的运气。

    if (childVal != '') {
        child.filter("option[value=" + childVal + "]").attr("selected", true);
    }

<强> Here is a jsFiddle example that sets the default value of an options list.

相关问题
最新问题