Question

我有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('');
});

我的问题是，当我在第三个selectBox中设置一个值，然后更改第一个选择框时，它应该通过执行

重置第二个和第三个选择框

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

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

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

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

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

???

（我正在使用Jquery 1.11.3）

Answer 1

在您的实际代码中，您是否在＆＃34; staff＆＃34;之后添加了引号？第三个选择标记的name属性的值？除非你没有将代码复制+粘贴到此处，否则这肯定会调试它，因为name = value对对于表单提交至关重要。

Answer 2

更改

name =“staff id =”staff“

到

name =“staff”id =“staff”

你忘了关闭名字

Answer 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();
});

Answer 4

我找到了解决方案。我将所有代码更改为angluar样式并使用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 = '';
    };

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

html初始化selectbox问题

4 个答案: