2

已经有下面的 Javascript 和几个 Select Groups。

当在其中一个组中选择一个选项时，它将填充带有该选项的文本（）的Relavent文本框，以及带有Val（）的单个ID文本框。这一切都很好。

但我卡住的地方是，我需要它，这样当我在一个选择组中选择一个选项时，它会在另一个选择组中查找具有相同值的选项，然后显示该文本相关框中的选项。

例如，如果我选择“Option1”，它会在第一个文本框中显示“Option1”，在第二个文本框中显示“item1”（ID 文本框中显示为 1）。如果我选择“item3”，它会在第二个文本框中显示“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

这是它返回的完全正常的行为Object。这是自然的 jQuery 链接，所以你可以使用类似的东西$(this).val(something).hide();

请注意，$(selector).val('something')设置选定对象的值并返回该对象。如果您想获得价值，则必须val()不加争论地使用。

于 2013-09-02T13:14:49.453 回答
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 回答