データリストのオプション値を選択から変更する場合

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(){ 
 
\t var opt = $(this).find('option:selected'); 
 
\t $('#checkName option').prop('disabled', false); 
 
\t if(opt.length > 0 && opt.text() != '--') { 
 
\t \t $('#checkName option').prop('disabled', true); 
 
\t \t $('#checkName option[value="'+opt.text()+'"]').prop('disabled', false); 
 
\t } 
 
});

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