根据复选框更改下拉列表值 [英] Change Dropdown value based on checkbox

问题描述

我有点被困住了，不太了解为什么.我正在一个预先存在的框内工作，该框要求我们创建一种变通方法-为了简化说明，基本上我需要做的是使用所选复选框的值填充下拉列表.

I'm a bit stuck and not quite understanding why. I'm working within a pre-existing box that requires us to create a work-around - to simplify the explanation, basically what I need to do is populate a dropdown list with the value of a selected checkbox.

我已经了解了使用以下代码的基本知识:

I've gotten the basics of that to work with the following code:

<h4>Select a Date:</h4>
<input type="checkbox" id="session_1" value="1" name="this">Session 1
<br>      
<input type="checkbox" id="session_2" value="2" name="this">Session 2
<br>
<input type="checkbox" id="session_3" value="3" name="this">Session 3
<br>
<input type="checkbox" id="session_4" value="4" name="this">Session 4
<br/>
<input type="checkbox" id="session_5" value="5" name="this">Session 5
<br>
<input type="checkbox" id="session_6" value="6" name="this">Session 6
<br>
<br/><br/>
<select id="hidden_select">
    <option>-</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>

和jQuery:

$(':checkbox').on('change',function(){
 var th = $(this), name = th.prop('name'); 
 if(th.is(':checked')){
     $(':checkbox[name="'  + name + '"]').not($(this)).prop('checked',false);   
  }
});

$('input#session_1').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(1)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(1)').attr('selected', false);
      }
  });

$('input#session_2').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(2)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(2)').attr('selected', false);
      }
  });

  $('input#session_3').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(3)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(3)').attr('selected', false);
      }
  });

  $('input#session_4').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(4)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(4)').attr('selected', false);
      }
  });

  $('input#session_5').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(5)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(5)').attr('selected', false);
      }
  });

  $('input#session_6').on('change', function () {
      if ($(this).is(':checked')) {
          $('#hidden_select>option:eq(6)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(6)').attr('selected', false);
      }
  });

您可以在此处看到 jsfiddle .

如果您单击一个选项并完成操作，或者依次单击不同的框(1-6)，则此方法有效，但是如果您改变主意然后返回(选择1，然后选择4，然后返回到一个)下拉列表不再更新.

This works if you were to click one option and be done with it, or click different boxes in sequential order (1-6), but if you change your mind and go back (Select 1, then 4, then go back to one) the dropdown no longer updates.

关于它为什么不再认识到这一变化的任何想法?有办法克服吗?

Any thoughts as to why it stops recognizing the change? Is there a way to get past it?

推荐答案

即使您单击其他复选框，您在select中的选项仍保持选中状态.将选项之一设置为selected时，请确保从其他选项中删除selected属性:

Your options in your select are staying selected even after you click on a different checkbox. When you set one of the options to selected, make sure you remove the selected attribute from other options:

  $('input#session_3').on('change', function () {
      if ($(this).is(':checked')) {
          //PUT THIS LINE ON EACH OF YOUR HANDLERS
          $('#hidden_select>option').attr('selected', false);
          $('#hidden_select>option:eq(3)').attr('selected', true);
      } else {
          $('#hidden_select>option:eq(3)').attr('selected', false);
      }
  });

更新的提琴: https://jsfiddle.net/qnd75wmf/5/

这篇关于根据复选框更改下拉列表值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！