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中的列表中，但如果我选择--，则所有名称都会显示在datalist上。

Answer 1

＆＃13;

$('#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);
	}
});

＆＃13;

<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>

＆＃13;

Answer 2

这是一个有效的代码。但你必须知道：

将相同的值设置为2个选项是不好的。
最好将变量与选项列表保持一致并从中过滤。

但是使用您的代码，这将有效。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果我从select

2 个答案: