选择和单选选项以显示div

时间：2019-04-03 10:41:05

标签： javascript jquery html html5 couch-cms

我希望能够在选择选择选项和单选选项时显示相应的div（将包含表格）。

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

工作流程：下拉菜单->收音机->显示表格

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

3 个答案:

答案 0 :(得分：0)

您的意思是这样的吗？ `

$('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();
    }
});

`

您还必须将值添加到selectBox，检查小提琴 https://jsfiddle.net/50wjy9e1/

答案 1 :(得分：0)

$(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>

答案 2 :(得分：0)

与此有关？

{
  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>

相关问题
最新问题