Question

我的下拉菜单中有3个值，我有2个名称为“ action”的单选按钮

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

如果用户仅选择“关闭”，我需要显示单选按钮，否则它将显示下一个跟进日期。（还包括“已关闭”）

Answer 1

您可以使用select的onchange（）进行尝试，如下所示：

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>

Answer 2

您几乎不需要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>

Answer 3

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

如何显示和选择单选按钮值取决于所选的下拉列表？

3 个答案: