Question

已经有以下Javascript和几个选择组。

当选择其中一个组中的一个选项时，它会使用该选项的text（）填充相关文本框，并使用val（）填充单个ID文本框。一切正常。

但我遇到的问题是，我需要它，所以当我在其中一个选择组中选择一个选项时，它会在另一个选择组中查找具有相同值的选项，然后显示相关方框中该选项的文字。

e.g。如果我选择＆＃39;选项1＆＃39;，则会显示＆＃39;选项1＆＃39;在第一个文本框中，＆＃39; item1＆＃39;在第二个文本框中（和ID文本框中的1）。如果我选择＆＃39; item3＆＃39;，则会显示＆＃39; item3＆＃39;在第二个文本框中，＆＃39; option3＆＃39;在第一个文本框中（和ID文本框中的3）。

我得到了使用：

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

但无法使用＆＃39;选项[value = 1]＆＃39;来获取动态值。

我试过了：

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>

Answer 1

试试这个：

$(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());
    });
})

演示here

Answer 2

只是：

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

使用参数调用.val()时，如：

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

它不返回值，它返回jQuery对象，以允许链接。

要使用此功能获取其他select的文本，请执行：

var itemText = $("#selItem option[value=" + thisValue + "]").text();

Answer 3

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

这样的东西

请注意$(selector).val('something')设置所选对象的值并返回该对象。如果您想获得价值，您必须使用val()而无需参数。

Answer 4

试试这个：

$('#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/

jQuery试图根据另一个选择选项的结果获得一个选择选项的值

4 个答案:

演示here