[英]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.