[英]jQuery trying to get value of one select option based on result of another select option
已经具有以下Javascript，以及几个选择组。
在其中一个组中选择一个选项时，它将用该选项的text（）填充相关文本框，并使用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>
尝试这个：
$(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());
});
})
只是：
var thisValue = $(this).val();
当您使用参数调用.val()时，如下所示：
var thisValue = $("#txtID").val($(this).val());
它不返回值，而是返回jQuery对象以允许链接。
要使用它来获取另一个select的文本，请执行以下操作：
var itemText = $("#selItem option[value=" + thisValue + "]").text();
这是返回Object完全正常的行为。 这是自然的jQuery链接，因此您可以使用$(this).val(something).hide();
请注意， $(selector).val('something')设置选定对象的值并返回该对象。 如果要获取值，则必须使用不带参数的val() 。
尝试这个：
$('#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/
如何在一个 select 选项中获取选定值，并在此基础上，从 MySQL 表中获取数据，以相同形式显示另一个 select 选项
[英]How to get selected value in one select option and based on that, fetch data from MySQL table to show another select option in the same form
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.