Question

我在这个网址中有这个代码：

$(document).ready(function() {
                $("select[name=ClientsCities]").change(function() {
                    $(this).value="";
                    $("select[name=Clients] option").each(function(){
                        if ($(this).parent().is( "div" )) {
                            $(this).unwrap();
                        }
                    });


                    thisvalue = $(this).val();
                    if (thisvalue != "") {
                        $("select[name=Clients] option:not(:first)").each(function(){
                            if ($(this).attr("data-city") != thisvalue) {
                                $(this).wrap("<div></div>");
                            }
                        });
                    }
                });

                $("select[name=Clients").change(function(){
                    alert($(this).val());
                });

    $("select").select2({
        placeholder: "choose",
        maximumSelectionSize: 1
    });
            });

http://jsfiddle.net/gvhrcyum/

我需要的是第一个选择允许更改第二个当从第一个选择的东西时，它通过我在这里发现的跨浏览器的解决方案从第二个“隐藏”选项

然后从客户端选择选择不是正在重新找到正确的值，而是几乎总是第一个（314）或（空）

Answer 1

您的代码存在一些问题：

您在$(this).value="";的顶部设置了$("select[name=ClientsCities]").change，但这是不必要的。
您应该初始化javascript变量。因此，您应将此thisvalue = $(this).val();更改为var thisvalue = $(this).val();
您在此选择器]

$("select[name=Clients")

您在console.log($(this));内使用$("select[name=Clients]").change()。在这种情况下，$(this)是选择而不是选项。如果要获取所选选项的值，则应使用$(this).find(":selected").val()。
cities的空选项没有属性data-city。这将导致您在JS代码中出现问题。

以下是包含更改的代码和分叉的working JsFiddle。

<select name="ClientsCities">
    <option></option>
    <option value="8">city1</option>
    <option value="14">city2</option>
    <option value="19">city3</option>
</select>
<select name="Clients">
    <!-- added data-city here so the $.wrap() works -->
    <option data-city=""></option>
    <option value="314" data-city="8">client1</option>
    <option value="315" data-city="14">client5</option>
    <option value="316" data-city="14">client2</option>
    <option value="317" data-city="19">client3</option>
    <option value="313" data-city="">client4</option>
</select>

<script>
$(document).ready(function() {
    $("select[name=ClientsCities]").change(function() {
        var dataCity = $(this).val();

        $("select[name=Clients] option").each(function() {
            if ($(this).parent().is( "div" )) {
                $(this).unwrap();
            }
        });

        if (dataCity != "") {
            // changed the selector. No need for $.each() either
            $("select[name=Clients] option:not([data-city=" + dataCity + "])")
                 .wrap("<div></div>");
        }
    });

    $("select[name=Clients]").change(function() {
        console.log($(this).find(":selected"));
        console.log($(this).find(":selected").val());
    });

    $("select").select2({
        placeholder: "choose",
        maximumSelectionSize: 1
    });
});
</script>

select2并从另一个select中删除多个选项

1 个答案: