別の選択肢からオプションをチェックする場合、複数のオプションを選択する方法は？

Question

最初の選択からのチェックオプションに応じて、2番目の選択から複数のオプションを選択します。例えば

：

adiunkt - > mikroklimat、RTG

エージェントcelny - > zapylenie

まず選択：

<select name="form[stanowisko][]" id="stanowisko"> 
<option value="adiunkt">adiunkt</option> 
<option value="agent celny">agent celny</option> 
</select> 

第二の選択：

<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe"> 
<option value="mikroklimat">mikroklimat</option> 
<option value="RTG">RTG</option> 
<option value="zapylenie">zapylenie</option> 
</select> 

（最初のチェックの後にすべてのオプションを選択します）私はこれを試してみましたが、それは動作していない：

function tes(){ 
if (document.getElementById('stanowisko').value ="agent celny") { 
document.getElementById('czynniki_szkodliwe').options[2].selected = true; 
document.getElementById('czynniki_szkodliwe').options[0].selected = true; 
} 

if (document.getElementById('stanowisko').value="adiunkt") { 
document.getElementById('czynniki_szkodliwe').options[1].selected = true; 
} 
} 

Answer 1

あなたはこのような最初のselectにリンクされているオプションマークするdata属性を使用する必要があります。

$(document).ready(function(){ 
 
    $("#stanowisko").on("change", function(event){ 
 
    var $options = $("#czynniki_szkodliwe option"); 
 
    
 
    //Unselect all 
 
    $options.prop("selected", false); 
 
    var val = $("#stanowisko").val(); 
 
    $options.each(function(idx, item) { 
 
     if($(item).data("stanowisko").indexOf(val) >= 0) { 
 
     $(item).prop("selected", true); 
 
     } 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="form[stanowisko][]" id="stanowisko"> 
 
    <option value="">Choose</option> 
 
    <option value="adiunkt">adiunkt</option> 
 
    <option value="agent celny">agent celny</option> 
 
    <option vlaue="lekarz">lekarz</option> 
 
</select> 
 

 
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe"> 
 
    <option data-stanowisko='["adiunkt"]' value="mikroklimat">mikroklimat</option> 
 
    <option data-stanowisko='["adiunkt","lekarz"]' value="RTG">RTG</option> 
 
    <option data-stanowisko='["agent celny"]' value="zapylenie">zapylenie</option> 
 
</select>

を

編集：最初selectから、いくつかのoptions場合は、同じ012を指しが2番目のselectにある場合は、配列をJSON形式のdata属性に「格納」することができます。

の代わりにdata属性でJSON配列を処理するようにJSコードを更新しました。

Answer 2

純粋な溶液。

let elem1 = document.getElementById('stanowisko'), 
 
    elem2 = document.getElementById('czynniki_szkodliwe'); 
 

 
elem1.addEventListener('change', (e) => { 
 
    Array.from(elem2.children).forEach(v => { 
 
    return v.disabled = v.getAttribute('data-attr') !== e.target.value; 
 
    }) 
 
});

<select name="form[stanowisko][]" id="stanowisko"> 
 
    <option value="">-</option> 
 
    <option value="adiunkt">adiunkt</option> 
 
    <option value="agent celny">agent celny</option> 
 
</select> 
 

 
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe"> 
 
    <option value="mikroklimat" disabled data-attr='adiunkt'>mikroklimat</option> 
 
    <option value="RTG" disabled data-attr='adiunkt'>RTG</option> 
 
    <option value="zapylenie" disabled data-attr='agent celny'>zapylenie</option> 
 
</select>