3

JSとjQueryを学び始めたばかりで、質問があります。複数のセレクターで複雑になる可能性のある動的なフォームを作成したいと思います。問題は、Option1を開いてから、option6と7で他のセレクターを押すと消えますが、表示したいのです。問題は$（'label'）。hide（）;です。しかし、私はjQueryとJscriptが苦手なので、これを機能させる方法がわかりません。これについて何か助けていただければ幸いです。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('label').hide();
    $('#sel').change(function() {

        var val = $(this).val();

        $('label').hide();

        switch (val){
            case 'option1':
                $('#label1').show();
                break;
            case 'option2':
                $('#label2').show();
                break;
            case 'option3':
                $('#label3').show();
                break;
            case 'option4':
                $('#label4').show();
                break;
            case 'option5':
                $('#label5').show();
                break;

        }
    });

    $('#sel2').change(function() {

        var val = $(this).val();

        $('label').hide();

        switch (val){
            case 'option6':
                $('#label6').show();
                break;
            case 'option7':
                $('#label7').show();
                break;        
        }
    });


    $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
             $(this).next("span").fadeOut(1000);
        });
});
</script>


<style>
label {
    display:block;
}
</style>
</head>

<body>

<form>
    <select id="sel">
        <option value="">- select -</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Other</option>
    </select>

    <label id="label1">
        <select id="sel2">
            <option value="">- select -</option>
            <option value="option6">Option 6</option>
            <option value="option7">Option 7</option>
        </select>
    </label>

    <label id="label2" for="option2">Text box label 2
        <input type="text" id="option2" />
    </label>
    <label id="label3" for="option3">Text box label 3
        <input type="text" id="option3" />
    </label>
    <label id="label4" for="option4">Text box label 4
        <input type="text" id="option4" />
    </label>
    <label id="label5" for="option5">Other
        <input type="text" id="option5" />
    </label>

    <label id="label6" for="option6">Text box label 6
        <input type="text" id="option6" />
    </label>
    <label id="label7" for="option8">Text box label 7
        <input type="text" id="option7" />
    </label>


</form>

</body>
</html>
4

3 に答える 3

1

たった1つの変更機能でこのようにできます

$('#sel,#sel2').change(function() {
    var $selIndex = $('#sel > option:selected').index(); // <-- store index of first select
    var val = $(this).val().replace('option', ''); // <-- remove options from id
    var $label = $('#label' + val); // <-- use number from options to get correct label
    $('label').not($label).hide(); // <-- hide all labels but current selected
    $('#label1').toggle($selIndex == 1); // <-- show if first select = option1
    $label.show(); // <-- show current selected 
});

http://jsfiddle.net/wirey00/FqX8k/

于 2012-08-21T01:21:27.510 に答える
1

この方法を使用するにはslice()、次のことを試してください。

$('#sel').change(function() {
    var val = this.value.slice(-1); // 1,2,3..
    $('label').slice(0, 4).hide();
    $('#label'+val).show()
});
于 2012-08-21T01:03:22.553 に答える
1

#sel2 を呼び出すと、毎回「ラベル」を隠し続けます (それ自体を含みます)。私はそれを次のように変更します：

$('#sel2').change(function() {

    var val = $(this).val();

    $('#label6').hide();
    $('#label7').hide();

    switch (val){
        case 'option6':
            $('#label6').show();
            break;
        case 'option7':
            $('#label7').show();
            break;
    }
});
于 2012-08-21T01:08:14.490 に答える