选择选项后如何显示单选按钮

Question

我有一个包含多个输入的表单，如下所示

这是 Jenis Layanan 的价值

当我从 Jenis Layanan 选择值时，如果我选择公司，我想在 jenis layanan 下面添加新字段单选按钮。如果我选择 Perorangan 或 Home Visit，单选按钮就会消失。

我怎样才能让它像这样工作？

我的代码

      <div class="p-2">
        <div class="form-group">
          <label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
          <select class="form-control" name="sub_product" id="sub_product">
            <option value="1">Perorangan</option>
            <option value="2">Home Visit</option>
            <option value="3">Corporate</option>
          </select>
        </div>
      </div>

      <div class="p-2">
        <div class="form-group">
          <label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
          <input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
        </div>
      </div>

Answer 1

您必须使用事件侦听器将一些 JS 写入您的表单：

document.querySelector('#sub_product').addEventListener('change', () => {
// your code
})

我用一个例子为你制作了codepen：

https://codepen.io/VeterJS/pen/BaRvYYx

Answer 2

Is easier with jQuery, when the Corporate option is selected the div display containing the radio buttons is changed to block and when other option is selected then the display goes back to none which hides the element.

$("select").change(function() {
    
    let option = '';
    
    $("select option:selected").each(function() {
      option = $( this ).text();
    });
    
    if(option == 'Corporate'){
      $('#radioBTNS').css('display','block')
    }else{
      $('#radioBTNS').css('display','none')
    }
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="p-2">
  <div class="form-group">
    <label class="form-label font-weight-bold" for="sub_product">Jenis Layanan</label>
    <select class="form-control" name="sub_product" id="sub_product">
      <option value="1">Perorangan</option>
      <option value="2">Home Visit</option>
      <option value="3">Corporate</option>
    </select>
  </div>
</div>

<div id="radioBTNS" style="margin:10px;display:none">
  <input type="radio" id="age1" name="age" value="30">
  <label for="age1">Radio btn one</label><br>
  <input type="radio" id="age2" name="age" value="60">
  <label for="age2">Radio btn two</label><br>  
</div>

<div class="p-2">
  <div class="form-group">
    <label class="form-label font-weight-bold" for="appoinment_date">Tanggal Pelayanan</label>
    <input name="appointment_date" placeholder="Tanggal Layanan" id="appointment_date" class="form-control datepicker" autocomplete="off">
  </div>
</div>

选择选项后如何显示单选按钮

How to show radio button after selecting option

html

javascript

dom

dom-events

我的代码