-1

我正在尝试创建一个在单击单选按钮时出现的列表，单击按钮后列表出现的方式出现问题。

这是示例http://jsfiddle.net/c2webdev/4bpKE/

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
    .none {
        display: none;
    }
</style>
</head>

<body>
<input type="radio" name='thing' value='valuable' data-id="bank"/>Running Event
<input type="radio" name='thing' value='valuable' data-id="school"/>Other challenges
<input type="radio" name='thing' value='valuable' data-id="bakery"/>Baking

<div id="school" class="none">
    <label for="name">What was the activity called?</label>
    <select id="myList">
        <option value="1">List item 1</option>
        <option value="2">List item 2</option>
        <option value="3">List item 3</option>
        <option value="4">List item 4</option>
    </select>
</div>
<div id="bank" class="none">
    <label for="name">What was the activity called?</label>
    <select id="myList">
        <option value="1">Pancake Making</option>
        <option value="2">Egg and spoon race</option>
        <option value="3">Sack race</option>
        <option value="4">Three leg race</option>
    </select></div>
<div id="bakery" class="none">
    <label for="name">What was the activity called?</label>
    <select id="myList">
        <option value="1">Pancake Making</option>
        <option value="2">Egg and spoon race</option>
        <option value="3">Sack race</option>
        <option value="4">Three leg race</option>
    </select></div>
<script>
    $(':radio').change(function (event) {
        var id = $(this).data('id');
        $('#' + id).addClass('none').siblings().removeClass('none');
    });
</script>
</body>
</html>

请帮忙

4

2 回答 2

0

您没有设置库，例如左侧窗格中的 jQuery

于 2013-08-24T14:06:42.267 回答
0

.select我在您选择的容器中添加了一个类名。如果您将来添加了另一个收音机，请以这种方式填充它。所以：

CSS：

.select {
    display: none;
}

JS：

$('input[type="radio"]').click(function (event) {
    $(".select").hide();
    var id = $(this).data('id');
    $('#' + id).show();
});

HTML：

<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="select">
    <label for="myList1">What was the activity called?</label>
    <select id="myList1">
        <option value="1">Virgin London Marathon</option>
        <option value="2">Round the Island cycle challenge</option>
        <option value="3">Kilimanjaro trek</option>
        <option value="4">Thames Path Challenge</option>
    </select>
</div>
<div id="bank" class="select">
    <label for="myList2">What was the activity called?</label>
    <select id="myList2">
        <option value="1">Pancake Making</option>
        <option value="2">Egg and spoon race</option>
        <option value="3">Sack race </option>
        <option value="4">Three leg race</option>
    </select>
</div>

请参阅启用的 jquery 演示

于 2013-08-24T14:14:08.843 回答