下拉列表onchange的问题

时间:2015-01-02 03:14:15

标签: javascript php jquery

可在此处找到正在运行的代码:http://jsfiddle.net/rwdengmz/
我道歉,因为我无法解释清楚我的问题,但这里有。 例如:当我点击父1时,它会正确显示它在孩子中存在的值

  • 来自父母1的孩子1
  • 来自父母1的孩子2

这样可行,但问题在于我将父选项更改为示例,父2,然后它将再次显示正确的子值

  • 父母2的孩子1
  • 来自父母2的孩子2

但是,在打开下拉列表之前,它将显示上一个子值,对于此实例,它将显示父项1中的子项1.

我如何制作它只是显示所选父选项的特定子值?

<select id="parent">

    <option value="1">Parent 1</option>
    <option value="2">Parent 2</option>
    <option value="3">Parent 3</option>
</select>

<select id="child">
    <option data-parentid="1">Child 1 from Parent 1</option>
    <option data-parentid="1">Child 2 from Parent 1</option>
    <option data-parentid="2">Child 1 from Parent 2</option>
    <option data-parentid="2">Child 2 from Parent 2</option>
    <option data-parentid="3">Child 1 from Parent 3</option>
    <option data-parentid="3">Child 2 from Parent 3</option>
</select>

$("#parent").on("change", function()
{
    var id = $(this).val();

    $("#child option").each(function()
    {
        $(this).css("display", ($(this).data("parentid") == id ? "" : "none"));
    });
}).trigger("change");

2 个答案:

答案 0 :(得分:2)

您需要做的就是将attr设置为selected。这应该可以帮助您解决仍然显示上一个值的问题,尽管调用了change函数并且选项正在填充。

$("#parent").on("change", function(){
    $('#child option').filter(function(){
        if($(this).data('parentid') == $('#parent').val()) {
            $(this).show().attr('selected','true');
        }
        else {
            $(this).hide();
        }
    });

});

查看 FIDDLE

答案 1 :(得分:0)

试试此代码

$("#parent").on("change", function()
{
    var id = $(this).val();
    $("#child").children('option').hide();
    $("select#child option[data-parentid="+id+"]").show().prop("selected", true);

}).trigger('change');