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

Question

have the below Javascript already, and a couple of Select Groups. 已经具有以下Javascript，以及几个选择组。

When selecting one of the options in one of the groups, it fills the relavent text box with the text() of that option, and the single ID text box with the val(). 在其中一个组中选择一个选项时，它将用该选项的text（）填充相关文本框，并使用val（）填充单个ID文本框。 This all works fine. 这一切都很好。

but where I am stuck is that , I need to have it , so that when I select an option in one of the select groups, it looks up the option with the same value in the other select group, and then displays the text of that option in the relevant box. 但是我遇到的困难是，我需要拥有它，这样当我在一个选择组中选择一个选项时，它将在另一个选择组中查找具有相同值的选项，然后显示该文本相关框中的选项。

eg If I pick 'Option1', it displays 'Option1' in the first text box, and 'item1' in the second text box (and 1 in the ID text box). 例如，如果我选择“ Option1”，它将在第一个文本框中显示“ Option1”，在第二个文本框中显示“ item1”（在ID文本框中显示1）。 If I pick 'item3', it displays 'item3' in the second text box, and 'option3' in the first text box (and 3 in the ID text box). 如果我选择“ item3”，它将在第二个文本框中显示“ item3”，并在第一个文本框中显示“ option3”（在ID文本框中显示3）。

I got as far as using: 我尽力使用：

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

but can't get the dynamic value to go with 'option[value=1]'. 但无法获得与“ option [value = 1]”匹配的动态值。

I tried: 我试过了：

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

but it responds with [object Object] . 但它以[object Object]响应。

If anyone can point me in the right direction it would be appreciated. 如果有人能指出我正确的方向，将不胜感激。

<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

Try this: 尝试这个：

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

Demo here 在这里演示

Answer 2

It's just: 只是：

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

When you call .val() with an argument, as in: 当您使用参数调用.val()时，如下所示：

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

it doesn't return the value, it returns the jQuery object, to allow for chaining. 它不返回值，而是返回jQuery对象以允许链接。

To use this to get the text of the other select , do: 要使用它来获取另一个select的文本，请执行以下操作：

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

Answer 3

This is totally normal behavior that it returns Object . 这是返回Object完全正常的行为。 This is natural jQuery chaining, so You could use something like $(this).val(something).hide(); 这是自然的jQuery链接，因此您可以使用$(this).val(something).hide();

Please note that $(selector).val('something') sets up value of selected object and returns that object. 请注意， $(selector).val('something')设置选定对象的值并返回该对象。 If You would like to get value, You have to use val() without argument. 如果要获取值，则必须使用不带参数的val() 。

Answer 4

try this: 尝试这个：

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

works like a charm in my fiddle: http://jsfiddle.net/FPvxB/ 在我的小提琴中就像魅力一样工作： http : //jsfiddle.net/FPvxB/

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

问题描述

4 个解决方案

解决方案1
2 已采纳 2013-09-02 13:14:46

Demo here 在这里演示

解决方案2
2 2013-09-02 13:16:09

解决方案3
1 2013-09-02 13:14:49

解决方案4
1 2013-09-02 13:31:31

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

问题描述

4 个解决方案

解决方案1 2 已采纳 2013-09-02 13:14:46

Demo here 在这里演示

解决方案2 2 2013-09-02 13:16:09

解决方案3 1 2013-09-02 13:14:49

解决方案4 1 2013-09-02 13:31:31

解决方案1
2 已采纳 2013-09-02 13:14:46

解决方案2
2 2013-09-02 13:16:09

解决方案3
1 2013-09-02 13:14:49

解决方案4
1 2013-09-02 13:31:31