Question

我希望从第二个选择中选择多个选项，具体取决于第一个选择的检查选项。

例如：

adiunkt - ＆gt; mikroklimat，RTG

agent celny - ＆gt; 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

Pure js解决方案。

＆＃13;

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;
  })
});

＆＃13;

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

＆＃13;

如果选中其他选项中的选项，如何选择多个选项？

2 个答案: