Как отобразить и выбрать значение переключателя в зависимости от выбранного выпадающего списка? - PullRequest
Новая
       17

Как отобразить и выбрать значение переключателя в зависимости от выбранного выпадающего списка?

0 голосов
/ 12 июня 2019

У меня есть 3 значения для выпадающего списка, и у меня есть 2 переключателя с именем = "действие" 

Action :
<select>
  <option value="Further follow up needed">Further follow up needed</option>
  <option value="Rejected">Rejected</option>
  <option value="Closed">Closed</option>
</select>

Next Follow Up Date:
<input name="ww" type="text" id="ww" value=""></td>
<br> Are sure you want to closed the activity?
<br>
<INPUT TYPE='radio' NAME='action' VALUE='yes'>Yes
<INPUT TYPE='radio' NAME='action' VALUE='no'>No

Мне нужно отобразить переключатель, если пользователь выбрал только «закрыто», в противном случае он будет отображаться в следующую дату. (также включите «закрыто»)

Ответы [ 3 ]

0 голосов
/ 12 июня 2019 

Action :
<select id="question">
  <option value="Further follow up needed">Further follow up needed</option>
  <option value="Rejected">Rejected</option>
  <option value="Closed">Closed</option>
</select>

Next Follow Up Date:
<input name="ww" type="text" id="ww" value=""></td>
<br> Are sure you want to closed the activity?
<br>
<INPUT TYPE='radio' NAME='action' id="yes" VALUE='yes'>Yes
<INPUT TYPE='radio' NAME='action' id="no" VALUE='no'>No

Вы можете использовать: 

var e = document.getElementById("question");
var answer = e.options[e.selectedIndex].text;
if(answer){
var radiobtn = document.getElementById("yes");
radiobtn.checked = true;
}

Не забудьте добавить атрибут id для всех элементов

0 голосов
/ 12 июня 2019

Вы можете попробовать его, используя onchange () из select, как показано ниже: 

function showDiv(element)
{
    document.getElementById('date_div').style.display = element.value == 0 ? 'block' : 'none';
    
    document.getElementById('radio_div').style.display = element.value == 1 ? 'block' : 'none';
    
}
#date_div {
    display: none;
}

#radio_div {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Action :
<select id="sel_box" onchange="showDiv(this)">
  <option value="Further follow up needed">Further follow up needed</option>
  <option value="0">Rejected</option>
  <option value="1">Closed</option>
</select>

<div id="date_div">
  <label>Next Follow Up Date: </label>
  <input name="ww" type="text" id="ww" value="">
</div>

<div id="radio_div">
<br> Are sure you want to closed the activity?
<br>
<INPUT TYPE='radio' NAME='action' VALUE='yes'>Yes
<INPUT TYPE='radio' NAME='action' VALUE='no'>No

</div>
0 голосов
/ 12 июня 2019

Вы можете скрыть это с помощью jquery. 

$('#radio_div').hide();
$('#date_div').hide();

$(document).on('change', '#sel_box', function(e){

  var value = $(this).val();
  
  if(value == 'Closed') {
    $('#radio_div').show();
    $('#date_div').hide();
  } else {
    $('#radio_div').hide();
    $('#date_div').show();
  }
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Action :
<select id="sel_box">
  <option value="Further follow up needed">Further follow up needed</option>
  <option value="Rejected">Rejected</option>
  <option value="Closed">Closed</option>
</select>

<div id="date_div">
  <label>Next Follow Up Date: </label>
  <input name="ww" type="text" id="ww" value="">
</div>

<div id="radio_div">
<br> Are sure you want to closed the activity?
<br>
<INPUT TYPE='radio' NAME='action' VALUE='yes'>Yes
<INPUT TYPE='radio' NAME='action' VALUE='no'>No

</div>
...