Question

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select Language:</option>
    <option value="1">HTML</option>
    <option value="2">RUBY</option>
 </select>
</div>

选择一个选择框后，将无法编辑另一个选择框

<div class="custom-select" style="width:200px;">
      <select>
        <option value="0">Select Language:</option>
       <option value="1">HTML</option>
       <option value="2">RUBY</option>
     </select>
    </div>

无法选择以上选择菜单。

Answer 1

这应该有所帮助。但是，您将需要JQuery来完成这项工作。

$('select[name=select1]').on('change', function() {
  $('select[name=select2]').prop("disabled", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-select" style="width:200px;">
  <select name="select1">
    <option selected disabled value="0">Select Language:</option>
    <option value="1">HTML</option>
    <option value="2">RUBY</option>
  </select>
</div>
<div class="custom-select" style="width:200px;">
  <select name="select2">
    <option value="0">Select Language:</option>
    <option value="1">HTML</option>
    <option value="2">RUBY</option>
  </select>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

通过选择一个选择框中的元素，无法选择另一个选择框，即另一个选择框将处于隐藏格式

1 个答案: