如果我从select更改，则从数据列表中过滤选项值

Question

我知道我的帖子已经重复，但是我找不到适合我的帖子。

我有一个代码：

 <select project="myclass" class="form-control" name="myclass" id="myclass" onchange="" value="--"> <option>--</option> <option>X TKJ 1</option> <option>X TKJ 2</option> </select> <input type="text" name="name" id="name" placeholder="Student Name" list="checkName" autocomplete="off" required> <datalist id="checkName"> <option value="X TKJ 1">ALEX</option> <option value="X TKJ 2">JOHN</option> <option value="X TKJ 1">SAM</option> <option value="X TKJ 2">ANDY</option> </datalist> 

如何如果我选择X TKJ 2 DataList控件将通过筛选值X TKJ 2 。 因此，如果输入ALEX ，则由于X TKJ 1而不显示在列表中，但是如果选择-- ，则所有名称都将显示在数据列表中。

Answer 1

 $('#myclass').on('change', function(){ var opt = $(this).find('option:selected'); $('#checkName option').prop('disabled', false); if(opt.length > 0 && opt.text() != '--') { $('#checkName option').prop('disabled', true); $('#checkName option[value="'+opt.text()+'"]').prop('disabled', false); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <select project="myclass" class="form-control" name="myclass" id="myclass" onchange="" value="--"> <option>--</option> <option>X TKJ 1</option> <option>X TKJ 2</option> </select> <input type="text" name="name" id="name" placeholder="Student Name" list="checkName" autocomplete="off" required> <datalist id="checkName"> <option value="X TKJ 1">ALEX</option> <option value="X TKJ 2">JOHN</option> <option value="X TKJ 1">SAM</option> <option value="X TKJ 2">ANDY</option> </datalist> 

Answer 2

这是一个工作代码。 但是您必须知道：

1. 将相同的值设置为2个选项很不好。
2. 最好保留一个带有选项列表的变量并从中过滤。

但是使用您的代码，就可以了。

 var options = $('#checkName option').clone(); $('#myclass').change(function(){ var val = $(this).val(), filterOptions = val == '' ? options : options.filter('[value="' + val + '"]'); $('#checkName').html('').append(filterOptions); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select project="myclass" class="form-control" name="myclass" id="myclass" onchange="" value="--"> <option value="">--</option> <option>X TKJ 1</option> <option>X TKJ 2</option> </select> <input type="text" name="name" id="name" placeholder="Student Name" list="checkName" autocomplete="off" required> <datalist id="checkName"> <option value="X TKJ 1">ALEX</option> <option value="X TKJ 2">JOHN</option> <option value="X TKJ 1">SAM</option> <option value="X TKJ 2">ANDY</option> </datalist>