javascript - 选择和单选选项以显示 div

Question

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

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

工作流程：Dropdown -> Radio -> Show 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

标签： javascriptjqueryhtmlcouch-cms

Answer 1

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