Question

以下是我的复选框和下拉列表：

<label>
  <input type="checkbox" name="check_list[]" Value="Castle Connolly Regional Top Doctor" />Castle Connolly Regional Top Doctor</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Castle Connolly Top U.S. Doctor" id="ccn" />Castle Connolly Top U.S. Doctor</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Vitals Compassionate Doctor" />Vital's Compassionate Doctor Recognition</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Super Doctor" />Super Doctor</label>
<select name="check_year[]"></select>

我最初试图在数组中捕获它们并连接成一个我插入数据库的变量，但是如果数组长度不同则很难。我认为最好只选择其中一个方框时有一个下拉菜单，那么我怎样才能在JavaScript中这样做呢？

Answer 1

使用jQuery实现这一目标的最简单方法是，我认为：

// select the <input> elements whose 'type' attribute is equal
// to 'checkbox', and bind the anonymous function of the on()
// method as the event handler for the named ('change') event(s):
$('input[type=checkbox]').on('change', function(){

  // find the first ancestor <label> element of the current
  // <input>, find the next sibling that matches the selector
  // (to ensure that we're working only with <select> elements,
  // and set its 'disabled' property to false when the the
  // checkbox is checked (so !true) and to true when the checkbox
  // is not checked:
  $(this).closest('label').next('select').prop('disabled', !this.checked);

// fire the change event on each of the checkboxes on page-load,
// to appropriately disable/enable the <select> elements:
}).change();

＆＃13;

$('input[type=checkbox]').on('change', function() {
  $(this).closest('label').next('select').prop('disabled', !this.checked);
}).change();

＆＃13;

label {
  margin: 0.5em 1em 0 0;
}
label::before {
  content: '';
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <input type="checkbox" name="check_list[]" Value="Castle Connolly Regional Top Doctor" />Castle Connolly Regional Top Doctor</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Castle Connolly Top U.S. Doctor" id="ccn" />Castle Connolly Top U.S. Doctor</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Vitals Compassionate Doctor" />Vital's Compassionate Doctor Recognition</label>
<select name="check_year[]"></select>
<label>
  <input type="checkbox" name="check_list[]" Value="Super Doctor" />Super Doctor</label>
<select name="check_year[]"></select>

＆＃13;

JS Fiddle demo

参考文献：

Answer 2

以下是其他人的工作codepen。

基本上你创建一个带有无序列表的div

         <div class="mutliSelect">
            <ul>
                <li><input type="checkbox" value="Apple" />Apple</li>
                <li><input type="checkbox" value="Blackberry" />Blackberry</li>
                <li><input type="checkbox" value="HTC" />HTC</li>
                <li><input type="checkbox" value="Sony Ericson"     />Sony Ericson</li>
                <li><input type="checkbox" value="Motorola" />Motorola</li>
                <li><input type="checkbox" value="Nokia" />Nokia</li>
            </ul>
         </div>

然后你有一个监听器功能，当用户点击其中一个复选框时会做某事

  $('.mutliSelect input[type="checkbox"]').on('click', function() {
        // do something here
  })

codepen中有很多细节。你可能不需要全部。

谢谢，

伞兵

如何在复选框点击时创建下拉菜单？

2 个答案: