Javascript jQuery正在尝试根据另一个选择选项的结果获取一个选择选项的值_Javascript_Jquery_Jquery Selectors

Javascript jQuery正在尝试根据另一个选择选项的结果获取一个选择选项的值

javascript jquery

Javascript jQuery正在尝试根据另一个选择选项的结果获取一个选择选项的值,javascript,jquery,jquery-selectors,Javascript,Jquery,Jquery Selectors,已经有了下面的Javascript，以及几个选定的组在其中一个组中选择一个选项时，它会用该选项的text（）填充relavent文本框，用val（）填充single ID文本框。这一切都很好但我陷入困境的是，我需要它，这样当我在一个选择组中选择一个选项时，它会在另一个选择组中查找具有相同值的选项，然后在相关框中显示该选项的文本 e、 g。如果我选择“Option1”，它将在第一个文本框中显示“Option1”，在第二个文本框中显示“item1”（在ID文本框中显示1）。如果我选择“it

已经有了下面的Javascript，以及几个选定的组

在其中一个组中选择一个选项时，它会用该选项的text（）填充relavent文本框，用val（）填充single ID文本框。这一切都很好

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

e、 g。如果我选择“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>


.InputField{宽度：150px；}
$（文档）.ready（函数（）
{
$（'#selpoption'）。更改（函数（）
{
$（'#txtID'）.val（$（this.val（））；
$（'#txtOption'）.val（$（'#selpoption:selected'）.html（））；
}
);
$（'#selItem'）。更改（函数（）
{
$（'#txtID'）.val（$（this.val（））；
$（'#txtItem'）.val（$（'#selItem选项：selected'）.html（））；
}
);
})  
选择一个。。。
选择1
选择2
选择3
选择一个。。。
项目1
项目2
项目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());
    });
})

演示返回

对象

是完全正常的行为。这是自然的jQuery链接，因此您可以使用类似于

$（This）.val（something）.hide（）的内容
请注意，$（选择器）.val（'something'）
设置所选对象的值并返回该对象。如果要获取值，必须使用无参数的val（）
。
它只是：
var thisValue = $(this).val();

使用参数调用.val（）
时，如：
var thisValue = $("#txtID").val($(this).val());

它不返回值，而是返回jQuery对象，以允许链接
要使用此选项获取另一个的文本，请选择
，执行以下操作：
var itemText = $("#selItem option[value=" + thisValue + "]").text();

试试这个：
$('#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;                        
    }
});

在我的小提琴里，它就像一个符咒：
$（'#selItem'）.val（$（this.val（））
在firefox中很有魅力…你使用的是什么浏览器？我通常使用Chrome，这是不做“专业”web开发人员的优势之一，我可以更好地控制代码在哪些浏览器上运行。我给了你一个答案…尝试一下并给出反馈：）在我的答案中，我还更改了所选选项，这是需要的还是只需要在下面的字段中插入文本值？这不是严格需要的，只是因为我没有考虑到这一点。这对我接下来要做的事情非常有用。很好的解释，我没有意识到物体和价值之间的区别。我认为需要更多的阅读。在问题中，它说从一个菜单中选择会在另一个菜单中查找相应的元素，并将其放入文本字段。这个答案还改变了另一个菜单中的选定元素，这是一个副作用——这也是你想要的吗？@Barmar，说得对。我只是觉得奥普想要这个。我现在也要把这件事提出来。为此干杯。我喜欢将其构建为函数并使用.trigger（）来“触发”更改的选项。今天我学到了一些新东西。