Question

我有一个下拉列表。单击其中一个项目时，应显示单选按钮以显示。

我到了这里。现在的问题是

我有4个单选按钮。我想显示2个选项并隐藏2个选项。在javascript。

我该怎么做？

Answer 1

你可以用jquery

来做到这一点

$(function() {
    $('#dropdownId').change(function() { //when the dropdown change
        var selectValue = $(this).val(); //Get it's value
        if (selectValue == 1) {
            $("#radioButtonId1").show();
            $("#radioButtonId2").show();
            $("#radioButtonId3").hide();
            $("#radioButtonId4").hide();
        }
    });
}

您还可以使用选项上的数据来获取需要显示的选项：

<input type = "radio" class="DependOnSelect" data-showonid="1,3,5" />
<input type = "radio" class="DependOnSelect" data-showonid="2,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="1,4,6" />
<input type = "radio" class="DependOnSelect" data-showonid="2,3,5" />

$(function() {
    $('#dropdownId').change(function() {
        var selectValue = $(this).val();
        if (selectValue == 1) {
            $('.DependOnSelect').each(function() { //for each Options
                var splited = $(this).data("showonid").split(','); 
                if (jQuery.inArray(selectValue, splited) > -1)
                    $(this).show(); // if the data-showonid contains the id, show it
                else
                    $(this).hide();                    
            });
        }
    });
}

JSFIDLE 在jquery中禁用元素：

$('#ElementId').attr("disabled", "disabled);

启用它：

$('#ElementId').removeAttr("disabled");

纯粹的Javascript中的

：

HTML：

<select id="dropdownId" onChange="jsFunction()">
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>
<br/>
<input type="radio" name="option" id="option1" />1
<br/>
<input type="radio" name="option" id="option2" />2
<br/>
<input type="radio" name="option" id="option3" />3
<br/>
<input type="radio" name="option" id="option4" />4
<br/>

的javascript：

function jsFunction() {
    var myselect = document.getElementById("dropdownId");
    var value = myselect.options[myselect.selectedIndex].value;

    if (value == 1) {
        document.getElementById('option1').disabled = 'disabled';
    } else {
        document.getElementById('option1').disabled = '';
    }

    if (value == 2) {
        document.getElementById('option2').disabled = 'disabled';
    } else {
        document.getElementById('option2').disabled = '';
    }

    if (value == 3) {
        document.getElementById('option3').disabled = 'disabled';
    } else {
        document.getElementById('option3').disabled = '';
    }

    if (value == 4) {
        document.getElementById('option4').disabled = 'disabled';
    } else {
        document.getElementById('option4').disabled = '';
    }
}

JSFIDLE

Answer 2

您好，您可以使用“禁用”

禁用任何特定选项

<input type="radio" name="someName" value="someValue" id="someId" disabled>

Then get the two options you want to hide and make display = "none";

限制单选按钮显示，javascript

2 个答案: