Select 和要显示的单选选项 div

Question

当 select 选项和单选选项被 select 编辑时，我希望能够显示相应的 div（将包含 table）。

我正在使用 couchcms 作为后端。我需要生成的 table 将由 couchcms 的标签填充。我想要那个，因为有两个不同的 div（这里我使用 div 代替 table）我希望能够使用组合显示 div选项。我需要从下拉列表中 select 一个选项，然后将它与单选按钮选项结合起来并显示相应的 div。我已经能够使用单选选项显示 div，但我如何将其与下拉菜单结合使用。

工作流程：下拉菜单 -> 单选 -> 显示 Table

document.getElementById("to_ho0").checked = false;
document.getElementById("to_ho1").checked = false;

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".box").not(targetBox).hide();
    $(targetBox).show();
  });
});

.box {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select name='icp'>
  <option selected disabled>SELECT</option>
  <option>ET</option>
  <option>ED</option>
  <option>EM</option>
</select>
<label for="to_ho0">
  <input type="radio" name="to_ho" id="to_ho0" value="To" >
  TO
</label>
<label for="to_ho1">
  <input type="radio" name="to_ho" id="to_ho1" value="Ho" >
  HO
</label>

<div class="To box">
  TO
</div>
<div class="Ho box">
  HO
</div>

JSFiddle

Answer 1

你的意思是这样的？ `

$('input[type="radio"], #select').change(function(){
    var inputValue = $('input[type="radio"]').attr("value");
    var targetBox = $("." + inputValue);
    if($('#select').val() !== ''){
        $(".box").not(targetBox).hide();
        $(targetBox).show();
    }
});

`

您还必须向选择框添加值，检查 fiddle https://jsfiddle.net/50wjy9e1/

Answer 2

$(document).ready(function(){
var e = document.getElementById("dd_icp");
var strDD = e.options[e.selectedIndex].text;
$(document).on("change", "select[id^='dd_icp']", function() {
 $(".box").hide();
  document.getElementById("to_ho0").checked = false;
 document.getElementById("to_ho1").checked = false;
  console.log($(this).val());
  $('input[type="radio"]').click(function(){
   var inputValue = $(this).attr("value");
   var targetBox = $("." + inputValue);
   $(".box").not(targetBox).hide();
   $(targetBox).show();
 });
  });
  
});

.box{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='icp' id='dd_icp'>
    <option selected disabled>SELECT</option>
  <option>ET</option>
  <option>ED</option>
  <option>EM</option>
</select>
<label for="to_ho0">
  <input type="radio" name="to_ho" id="to_ho0" value="To" >
  TO
</label>
<label for="to_ho1">
  <input type="radio" name="to_ho" id="to_ho1" value="Ho" >
  HO
</label>
             
<div class="To box">
 TO
</div>
<div class="Ho box">
  HO
</div>

Answer 3

这行的东西？

{
  const selector = '#icp';
  
  document.addEventListener('change', (e) => {
    if (e.target.name === 'to_ho' || e.target.id === 'icp_select') {
      const icp = document.getElementById('icp_select') || {value:''}
      const to_ho = document.querySelector('[name=to_ho]:checked') || {value:''}
      const boxes = document.getElementsByClassName('box')
      const active_boxes = Array.from(boxes).filter(i => i.classList.contains(icp.value + "_" + to_ho.value))
      
      for (box of boxes) {
        box.classList.remove('show')
      }
      
      for (box of active_boxes) {
        box.classList.add('show')
      }
    }
  })
  
}

[name=icp] {
  border: 1px solid red;
  color: red;
}
[name=icp]:valid {
  border-color: green;
  color: green;
}

.box {
  display: none;
}
.box.show {
  display: block;
}

<form>
  <select name="icp" id="icp_select" required>
    <option selected disabled value>SELECT</option>
    <option value="ET">ET</option>
    <option value="ED">ED</option>
    <option value="EM">EM</option>
  </select>

  <div id="icp_react" class="icp_react">
    <input type="radio" name="to_ho" id="to_ho0" value="To" class="_react">
    <label for="to_ho0">TO</label>

    <input type="radio" name="to_ho" id="to_ho1" value="Ho" class="_react">
    <label for="to_ho1">HO</label>
  </div>
</form>

<div class="ET_To box">
  To ET 1
</div>
<div class="ET_To box">
  To ET 2
</div>
<div class="ET_To box">
  To ET 3
</div>
<div class="ET_To box">
  To ET 4
</div>
<div class="ET_Ho box">
  Ho ET
</div>

<div class="ED_To box">
  To ED 1
</div>
<div class="ED_To box">
  To ED 2
</div>
<div class="ED_To box">
  To ED 3
</div>
<div class="ED_To box">
  To ED 4
</div>
<div class="ED_Ho box">
 Ho ET 1
</div>
<div class="ED_Ho box">
 Ho ET 2
</div>
<div class="ED_Ho box">
 Ho ET 3
</div>

<div class="EM_To box">
  To EM 1
</div>
<div class="EM_To box">
  To EM 2
</div>
<div class="EM_Ho box">
 Ho EM 1
</div>
<div class="EM_Ho box">
 Ho EM 2
</div>
<div class="EM_Ho box">
 Ho EM 3
</div>
<div class="EM_Ho box">
 Ho EM 4
</div>
<div class="EM_Ho box">
 Ho EM 5
</div>
<div class="EM_Ho box">
 Ho EM 6
</div>

或更一般

{
  const selector = '#icp';
  
  document.addEventListener('change', (e) => {
    if (e.target.name === 'icp') {
      for (item of document.getElementsByClassName('icp_react')) {
        item.classList.remove('show')
      }
      document.getElementById('icp_' + e.target.value).classList.add('show')
    } 
    
    if (e.target.classList.contains('_react')) {
      for (item of document.getElementsByClassName('box')) {
        item.classList.remove('show')
      }
      for (item of Array.from(document.getElementsByClassName('box')).filter(i => i.classList.contains(e.target.value) )) {
        item.classList.add('show')
      }
    }
  })
  
}

[name=icp] {
  border: 1px solid red;
  color: red;
}
[name=icp]:valid {
  border-color: green;
  color: green;
}

.icp_react {
  display: none;
}
.icp_react.show {
  display: block;
}

.box {
  display: none;
}
.box.show {
  display: block;
}

<form>
  <select name="icp" required>
    <option selected disabled value>SELECT</option>
    <option value="ET">ET</option>
    <option value="ED">ED</option>
    <option value="EM">EM</option>
  </select>

  <div id="icp_ET" class="icp_react">
    <input type="radio" name="to_ho" id="to_ho0" value="To" class="_react">
    <label for="to_ho0">TO</label>

    <input type="radio" name="to_ho" id="to_ho1" value="Ho" class="_react">
    <label for="to_ho1">HO</label>
  </div>

  <div id="icp_ED" class="icp_react">
    <input type="radio" name="di_du" id="di_du0" value="Di" class="_react">
    <label for="di_du0">DI</label>
    
    <input type="radio" name="di_du" id="di_du1" value="Du" class="_react">
    <label for="di_du1">DU</label>
  </div>

  <div id="icp_EM" class="icp_react">
    <input type="radio" name="ba_ma_fa" id="ba_ma_fa0" value="Ba" class="_react">
    <label for="ba_ma_fa0">BA</label>
    
    <input type="radio" name="ba_ma_fa" id="ba_ma_fa1" value="Ma" class="_react">
    <label for="ba_ma_fa1">MA</label>
    
    <input type="radio" name="ba_ma_fa" id="ba_ma_fa2" value="Fa" class="_react">
    <label for="ba_ma_fa2">FA</label>
  </div>
</form>

<div class="To box">
  TO
</div>
<div class="Ho box">
  HO
</div>

<div class="Du box">
  DU
</div>
<div class="Di box">
  DI
</div>

<div class="Ba box">
  BA
</div>
<div class="Ma box">
  MA
</div>
<div class="Fa box">
  FA
</div>

Select 和要显示的单选选项 div

Select and Radio options to show div

html

javascript

jquery

couch-cms