如果从不同的选择中检查选项，如何选择多个选项？

Question

我想从第二次选择中选择多个选项，具体取决于首次选择时的检查选项。

例如：

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

您应该使用data属性标记链接到第一select这样的选项：

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

编辑：如果几个options，从第一select，指的是同options在第二个select中，可以用JSON格式“存储”data属性中的数组。

我更新了JS代码来处理data属性中的JSON数组，而不是简单的string。

Answer 2

纯js解决方案。

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>