Выберите и параметры радио, чтобы показать div - PullRequest
Новая
       27

Выберите и параметры радио, чтобы показать div

0 голосов
/ 03 апреля 2019

Я хочу иметь возможность отображать соответствующий div (который будет содержать таблицу), когда выбрана опция выбора и опция радио.

Я использую couchcms в качестве бэкенда. Таблица, которую мне нужно сгенерировать, будет заполнена тегом 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 голосов
/ 03 апреля 2019 

$(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>
0 голосов
/ 03 апреля 2019

Что-то в этом роде? 

{
  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>
0 голосов
/ 03 апреля 2019

ты имеешь в виду что-то подобное?`

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

...