Question

如何根据所选的选项制作相关的单选按钮？

如果选择了Engineering Projects，则应出现一个单选按钮，它必须有abc，def，ghi等单选按钮。

如果选择了MCA项目，那么应该出现一个单选按钮，它必须有jsp，asp，php，java等单选按钮。

如果没有选择，则不会出现单选按钮。

<p>
    Area Of Interest
    <select name="formGender">
        <option value="">Select...</option>
        <option value="e">Engineering Project</option>
        <option value="m">MCA Projects</option>
        <option value="t">M-Tech Projects</option>
        <option value="s">Msc Projects</option>
    </select>
</p>

Answer 1

您需要获取所选选项的值并显示相对无线电。

＆＃13;

$("#dropdown").change(function(){
    var value = $(this).children("option:selected").val();
    $(".radioBox").hide(); 
    
    if (value == "number")
        $("#number").show();
    else if (value == "alphabet")
        $("#alphabet").show();
    else if (value == "sign")
        $("#sign").show();
});

＆＃13;

.radioBox {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
    <option value="">Select on of options</option>
    <option value="number">Number</option>
    <option value="alphabet">Alphabet</option>
    <option value="sign">Sign</option>
    <option value="none">None</option>
</select>

<div id="number" class="radioBox">
    <label>1</label>
    <input type="radio" name="number" />
    <label>2</label>
    <input type="radio" name="number" />
    <label>3</label>
    <input type="radio" name="number" />
</div>

<div id="alphabet" class="radioBox">
    <label>A</label>
    <input type="radio" name="alphabet" />
    <label>B</label>
    <input type="radio" name="alphabet" />
    <label>C</label>
    <input type="radio" name="alphabet" />
</div>

<div id="sign" class="radioBox">
    <label>@</label>
    <input type="radio" name="sign" />
    <label>#</label>
    <input type="radio" name="sign" />
    <label>$</label>
    <input type="radio" name="sign" />
</div>

＆＃13;

Answer 2

你需要做这样的事情：

$('#formGender').change(function(){
  var areaOfInterest = $('#formGender').find(":selected").text();

  if(areaOfInterest.toString() === "Engineering Project"){
    var arr=["abc","def","ghi"];
    for (i = 0; i < arr.length; i++) {
    var radioBtn = $('<input type="radio" name="sub" value="ersubs" checked>'+ arr[i]+"<br>");
    radioBtn.appendTo('#radiobuttons');
}
  }
  else{
    $( "#radiobuttons" ).empty();
  }
});

根据您的要求添加更多if/else。这是一个有效的example。

如何根据所选的选项制作相关的单选按钮？

2 个答案: