2

以下の Javascript が既にあり、いくつかのグループを選択します。

グループの 1 つのオプションの 1 つを選択すると、関連するテキスト ボックスにそのオプションの text() が入力され、単一の ID テキスト ボックスに val() が入力されます。これはすべてうまくいきます。

しかし、私が立ち往生しているのは、選択グループの1つでオプションを選択すると、他の選択グループで同じ値を持つオプションを検索し、そのテキストを表示するようにする必要があるということです関連するボックスのオプション。

たとえば、'Option1' を選択すると、最初のテキスト ボックスに 'Option1' が表示され、2 番目のテキスト ボックスに 'item1' (および ID テキスト ボックスに 1) が表示されます。'item3' を選択すると、2 番目のテキスト ボックスに 'item3' が表示され、最初のテキスト ボックスに 'option3' (および ID テキスト ボックスに 3) が表示されます。

私は使用するところまで行きました：

var disp = $('#selItem').find('option[value=1]').text();
alert(disp);

しかし、'option[value=1]' で動的な値を取得することはできません。

私は試した：

var thisValue = $('#txtID').val( $(this).val() ); 
alert(thisValue);

しかし、それはで応答し[object Object]ます。

誰かが私を正しい方向に向けることができれば、それはありがたいです。

<html>
<head>
    <script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"></script>
    <style>
        .InputField{ width:150px;}
    </style>
    <script>
        $(document).ready( function() 
        {
            $('#selOption').change( function() 
                {
                    $('#txtID').val( $(this).val() );
                    $('#txtOption').val($('#selOption option:selected').html());
                }
            );

            $('#selItem').change( function() 
                {
                    $('#txtID').val( $(this).val() );
                    $('#txtItem').val($('#selItem option:selected').html());
                }
            );
        })  
    </script>
</head>


<body>
    <select id="selOption" class="InputField">
        <option value="" disabled="" selected="" style="display:none;">Select One...</option>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
        <option value="3">Option3</option>                      
    </select>

    <select id="selItem" class="InputField">
        <option value="" disabled="" selected="" style="display:none;">Select One...</option>
        <option value="1">item1</option>
        <option value="2">item2</option>
        <option value="3">item3</option>                        
    </select>

    </br>

    <input type="text" name="txtOption" id="txtOption" placeholder="Which Option is it?" class="InputField"/>
    <input type="text" name="txtItem" id="txtItem" placeholder="Which item is it?" class="InputField"/>

    </br></br>

    <input type="text" name="txtID" id="txtID" placeholder="ID Number" class="InputField"/>
</body>
</html>
4

4 に答える 4

3

これを試して：

$(document).ready(function () {
    $('#selOption').change(function () {
        $('#txtID').val($(this).val());
        $('#txtOption').val($('#selOption option:selected').text());
        $('#selItem').val($(this).val());
        $('#txtItem').val($('#selItem option:selected').text());
    });

    $('#selItem').change(function () {
        $('#txtID').val($(this).val());
        $('#txtItem').val($('#selItem option:selected').text());
        $('#selOption').val($(this).val());
        $('#txtOption').val($('#selOption option:selected').text());
    });
})

デモはこちら

于 2013-09-02T13:14:46.967 に答える
2

それはただ：

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

.val()次のように、引数を指定して呼び出す場合:

var thisValue = $("#txtID").val($(this).val());

値を返すのではなく、連鎖を可能にするために jQuery オブジェクトを返します。

これを使用して other のテキストを取得するには、次のようselectにします。

var itemText = $("#selItem option[value=" + thisValue + "]").text();
于 2013-09-02T13:16:09.347 に答える
1

これを試して：

$('#selOption').change( function(){
    $('#txtID').val( $(this).val() );
    $('#txtOption').val($('#selOption option:selected').html());
    $('#selItem').val($(this).val());
    if(!changed){
        changed = true; //preventing recursion
        $('#selItem').trigger('change'); //fire change, to update text field
    } else {
        changed = false;                        
    }
});

私のフィドルで魅力のように機能します： http://jsfiddle.net/FPvxB/

于 2013-09-02T13:31:31.527 に答える
1

これは完全に正常な動作であり、返されますObject。これは自然な jQuery チェーンなので、次のようなものを使用できます$(this).val(something).hide();

$(selector).val('something')選択したオブジェクトの値を設定し、そのオブジェクトを返すことに注意してください。値を取得したい場合は、val()引数なしで使用する必要があります。

于 2013-09-02T13:14:49.453 に答える