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

【问题标题】：jQuery trying to get value of one select option based on result of another select optionjQuery试图根据另一个选择选项的结果获取一个选择选项的值
【发布时间】：2013-09-02 13:07:25
【问题描述】：

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

在其中一个组中选择其中一个选项时，它填充了带有该选项的文本（）的relvent文本框，以及带有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>

【问题讨论】：

$('#selItem').val($(this).val()); 在 Firefox 中就像一个魅力...你使用什么浏览器？
我通常使用 Chrome，不是“专业”网络开发人员的优势之一，我可以更好地控制我的代码在哪些浏览器上运行。
我给了你一个答案...试试看并提供反馈:)
在我的回答中，我还更改了选定的选项，这是想要的还是只需要获取要插入到下面字段中的文本值？
它并不是严格需要的，只是因为我没有考虑到这一点。它实际上对我接下来想做的事情非常有用。

标签： javascript jquery jquery-selectors

【解决方案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

【讨论】：

在问题中，它说从一个菜单中选择会在另一个菜单中查找相应的元素并将其放在文本字段中。此答案还会更改其他菜单中的选定元素作为副作用 - 这也是您想要的吗？
@Barmar，说得好。我只是认为OP想要那个。现在也向 OP 提出这个问题。

【解决方案2】：

只是：

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

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

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

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

要使用它来获取另一个select 的文本，请执行以下操作：

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

【讨论】：

那里很好的解释，我没有意识到对象和价值之间的区别。我认为需要阅读更多内容。

【解决方案3】：

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

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

【讨论】：

【解决方案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/

【讨论】：

为此欢呼。我喜欢将其构建为函数并使用 .trigger() 来“触发”更改的选项。我今天学到了一些新东西。