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

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，数据列表将按 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>