html初始化选择框问题答案

【问题标题】：html initialize selectbox issuehtml初始化选择框问题
【发布时间】：2016-05-23 15:31:55
【问题描述】：

我有 3 个选择框

<select name="comp" id="comp">
<option value="" disabled selected>Select company</option>
<option value="Company1">Company1</option>
<option value="Company2">Company2</option>
</select>

<select name="dept" id="dept">
<option value="" disabled selected>Select department</option>
<option value="All">All</option>
<option ng-repeat="department in departmentList" value="{{department}}">{{department}}</option>
</select>

<select name="staff" id="staff">
<option value="" disabled selected>Select staff</option>
<option value="All">All</option>
<option ng-repeat="staff in staffList" value="{{staff}}">{{staff}}</option>
</select>

如果第一个选择框改变了它的值，那么我想重置第二个和第三个选择框

$("#comp").change(function() {
    $('#dept').val(''); 
    $('#staff').val('');

});

如果第二个选择框改变了它的值，那么我只想重置第三个选择框

$("#dept").change(function() {
        $('#staff').val('');
});

我的问题是，当我在第三个选择框中设置一个值，然后更改第一个选择框时，它应该重置第二个和第三个选择框

$('#dept').val(''); 
$('#staff').val('');

但实际上它在第三个选择框的列表中添加了一个空白项

<option value="? string:staff name ?"></option> ==$0

为什么将此项目添加到列表中？如何将列表重置为所选值

 <option value="" disabled selected>Select staff</option>

???

（我使用的是 Jquery 1.11.3）

【问题讨论】：

标签： jquery html select

【解决方案1】：

在你的实际代码中，你是不是在第三个select标签的name属性的“staff”值后面加了引号？除非您没有将代码复制并粘贴到此处，否则肯定会对其进行调试，因为名称=值对对于表单提交至关重要。

【讨论】：

我更正了代码，在我的实际源中我没有这个问题，也许我不小心删除了它，但它没有解决问题
k，我很抱歉，但是很快就会有人对 JavaScript 的实际语言有足够的经验来帮助你。在那之前，祝你有个美好的夜晚。

【解决方案2】：

改变

name="staff id="staff"

到

name="staff" id="staff"

您忘记关闭名称

【讨论】：

谢谢，我更正了代码。我之前编辑帖子时不小心删除了引用，但它没有解决问题

【解决方案3】：

改成功能怎么样？

function selectBox1() {
    $("#comp").change(function() {
        $('#dept').val(''); 
        $('#staff').val('');
    });
}

function selectBox2() {
    $("#dept").change(function() {
        $('#staff').val('');
    });
    selectBox1();
}
selectBox1();
selectBox2();
$('#staff').change(function() {
    selectBox1();
    selectBox2();
});

【讨论】：

如果我从第二个选择框中选择一个项目，第三个选择框将不再更新
你试过这样做吗？
是的，我试过了，如果我将更改的事件放入函数中，当我更改值时如何调用它，例如，在第二个选择框中 ($("#dept")) ?
我已经更新了代码。忘记调用函数了。现在怎么样？能用吗？
我刚试过，我仍然有相同的行为，当我设置 $('#staff').val('');它添加了一个 ==$0

【解决方案4】：

我找到了解决方案。我将所有代码更改为角度样式并使用 ng-change 事件而不是

$('#selectbox').change(function() {});

像这样：

<select name="comp" id="comp" ng-change="changeComp()">
<option value="" disabled selected>Select company</option>
<option value="Company1">Company1</option>
<option value="Company2">Company2</option>
</select>

<select name="dept" id="dept" ng-change="changeDept()">
<option value="" disabled selected>Select department</option>
<option value="All">All</option>
<option ng-repeat="department in departmentList" value="{{department}}">{{department}}</option>
</select>

<select name="staff" id="staff">
<option value="" disabled selected>Select staff</option>
<option value="All">All</option>
<option ng-repeat="staff in staffList" value="{{staff}}">{{staff}}</option>
</select>

和 Jscript：

 $scope.changeComp = function(){
        $scope.editForm.dept = '';
        $scope.changeDept();

};

$scope.changeDept = function(){
        $scope.editForm.staff = '';
    };

此外，我在代码中更新了第三个选择框的源代码 2 次而不是仅一次，这在选择列表中添加了一个空白条目。

【讨论】：