如何根据从外部单选按钮组单击的内容显示或隐藏 <option>？

Question

我正在使用 jQuery 构建一个表单，当用户单击 "Add More" 时，该表单会动态添加具有递增 ID 的 select 字段。我需要能够根据用户 select 之前在表单中输入的内容显示或隐藏某些选项。

当用户点击单选组中的 "A" 时，"Div A1" 将被隐藏。当用户点击"B"时，"Div B1"会隐藏，但会显示"Div A1"，等等等等

这样做的最佳方法是什么？

$(function() {
  $('.show_hide_div_list').hide();

  $('#hide_div_A').click(function() {
    $('.show_hide_div_list').show();
  });

  $('#hide_div_B').click(function() {
    $('.show_hide_div_list').show();
  });

  $('#hide_div_C').click(function() {
    $('.show_hide_div_list').show();
  });

  $('#hide_div_D').click(function() {
    $('.show_hide_div_list').show();
  });

  var show_hide_div_max_fields = 36;
  var show_hide_div_x = 0;

  $('#show_hide_div_add').click(function(e) {
    e.preventDefault();
    if (show_hide_div_x < show_hide_div_max_fields) {
      show_hide_div_x++;
      var inps = $('#show_hide_div_wrapper >div:last').data('count') + 1 || 1;
      $('#show_hide_div_wrapper').append('<div class="show_hide_div" data-count="' + inps + '"><select id="show_hide_div"><option value="div_a" id="div_a' + inps + '">Div A' + inps + '</option><option value="div_b' + inps + '" id="div_b' + inps + '">Div B' + inps + '</option><option value="div_c' + inps + '" id="div_c' + inps + '">Div C' + inps + '</option><option value="div_d' + inps + '" id="div_d' + inps + '">Div D' + inps + '</option></select><a class=remove>Remove</a><br><br></div>');

    }
    $('#show_hide_div_wrapper').on('click', 'a.remove', function() {
      var inps = $('#show_hide_div_wrapper > div:last').data('count') - 1 || 1;
      show_hide_div_x--;
      $(this).closest('div').remove();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class="show_hide_div">
    <td style="vertical-align:top;">
      Select which options you want to hide
    </td>
    <td>
      <label>A</label>
      <input type="radio" name="hide_div" id="hide_div_A" value="A">
      <br>
      <label>B</label>
      <input type="radio" name="hide_div" id="hide_div_B" value="B">
      <br>
      <label>C</label>
      <input type="radio" name="hide_div" id="hide_div_C" value="C">
      <br>
      <label>D</label>
      <input type="radio" name="hide_div" id="hide_div_D" value="D">
    </td>
  </tr>
  <tr class="show_hide_div_list" style="line-height:1em;">
    <td>
    </td>
    <td>
      <span id="show_hide_div_wrapper">      
    </span>
    </td>
  </tr>
  <tr class="show_hide_div_list">
    <td>
      &nbsp;
    </td>
    <td>
      <button id="show_hide_div_add">Add More</button>
    </td>
  </tr>
</table>

Answer 1

设置要在单击单选按钮时隐藏和显示的 ID 列表。

<input type="radio" name="hide_div" data-hide='["div_A", "div_B"]' data-show='["div_C", "div_D"]' value="A" class="class_name">

 $(document).on("click", ".class_name" ,function(e) {
   var to_hide =  $(this).data('hide');
   var to_show =  $(this).data('show');

   //now you have array of ids to hide and show
   to_hide.forEach(function(item) {
      $(# + item).hide();
   });
 });

Answer 2

$(function() {
  $('.show_hide_div_list').hide();
  var divArray = ['A', 'B', 'C', 'D']
  divArray.forEach(function (item) {
      $('#hide_div_' + item).click(function () {
          $('.show_hide_div_list').show()
      })  
  });
  
  var show_hide_div_max_fields = 36;
  var show_hide_div_x = 0;

  $('#show_hide_div_add').click(function(e) {
    e.preventDefault();
      var optionArray = ['A', 'B', 'C', 'D'];
      optionArray.forEach(function (item) {
          if ($('#hide_div_' + item).prop('checked')) {
              if (show_hide_div_x < show_hide_div_max_fields) {
                  show_hide_div_x++;
                  var inps = $('#show_hide_div_wrapper >div:last').data('count') + 1 || 1;
                  
                  var div = $('<div>').addClass('show_hide_div').prop('data-count', inps);
              var select = $('<select>').prop('id', 'show_hide_div');
              optionArray.forEach(function (_item) {
                  if (_item != item) {
                      var option = $('<option>').prop('id', 'div_' + _item + inps).text('Div ' + _item);
                      select.append(option);
                  }                  
              })
              div.append(select).append('<a class=remove>Remove</a><br><br>');
              $('#show_hide_div_wrapper').append(div);
               }              
          }
      });
    
    $('#show_hide_div_wrapper').on('click', 'a.remove', function() {
      var inps = $('#show_hide_div_wrapper > div:last').data('count') - 1 || 1;
      show_hide_div_x--;
      $(this).closest('div').remove();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="show_hide_div">
    <td style="vertical-align:top;">
      Select which options you want to hide
    </td>
    <td>
      <label>A</label>
      <input type="radio" name="hide_div" id="hide_div_A" value="A">
      <br>
      <label>B</label>
      <input type="radio" name="hide_div" id="hide_div_B" value="B">
      <br>
      <label>C</label>
      <input type="radio" name="hide_div" id="hide_div_C" value="C">
      <br>
      <label>D</label>
      <input type="radio" name="hide_div" id="hide_div_D" value="D">
    </td>
  </tr>
  <tr class="show_hide_div_list" style="line-height:1em;">
    <td>
    </td>
    <td>
      <span id="show_hide_div_wrapper">      
    </span>
    </td>
  </tr>
  <tr class="show_hide_div_list">
    <td>
      &nbsp;
    </td>
    <td>
      <button id="show_hide_div_add">Add More</button>
    </td>
  </tr>
</table>

如何根据从外部单选按钮组单击的内容显示或隐藏 <option>？

How do I show or hide the <option>s based on what is clicked from an outside radio button group?

html

javascript

jquery

radio