我想创建一个对象数组，将第一个下拉键与第二个下拉值映射...需要从 php 获取对象数组与选择层级下拉菜单类似，费用下拉列表应该更新，费用值也应该更新在输入框中。
示例:如果我在第一个下拉菜单中选择第 1 层，那么它应该在第二个下拉菜单中更改“第 1 层 - 100 卢比”，并且输入字段的值应该更新为 100..
define('TIER_LIST', json_encode(
array(
'1' => 'Tier 1',
'2' => 'Tier 2',
'3' => 'Tier 3',
)
));
define('FEE_LIST', json_encode(
array(
'1' => 'Tier 1 -100 Rupees ',
'2' => 'Tier 2 -200 Rupees',
'3' => 'Tier 3 -300 Rupees',
)
));
$tierList = json_decode(TIER_LIST,true);
$feeList = json_decode(FEE_LIST,true);
// drop down fields
<select class='browser-default selectField' id="TierSelection">
<option value="">Choose your option</option>
<?php foreach($tierList as $value => $text) { ?>
<option value="<?php echo $value; ?>"><?php echo $text; ?></option>
<?php } ?>
</select>
<select class='browser-default selectField' id="FeeSelection">
<option value="">Choose your option</option>
<?php foreach($tierList as $value => $text) { ?>
<option value="<?php echo $value; ?>"><?php echo $text; ?></option>
<?php } ?>
</select>
<input type = "text" id = "feeValue">
var objArray = {tierdropdownkey : feedropdownValue } --->doubt in this creation # should not hard code
$("#tierDropDownId").change(function()
{
var ddText = $(this).val();
$.each(objArray,function(key,value)
{
if(ddText == key)
$("#feeDropDownId").val(value);
});
});
最佳答案
我已经通过添加 jquery 更新了您的代码。我也测试了这段代码。它运行良好。
你还需要怎么修改呢？如果有人试图在第一个地方选择选项 02 会发生什么。因此，要进行验证，请修改 java 脚本。
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body><?php
define('TIER_LIST', json_encode(
array(
'1' => 'Tier 1',
'2' => 'Tier 2',
'3' => 'Tier 3',
)
));
define('FEE_LIST', json_encode(
array(
'1' => 'Tier 1 -100 Rupees ',
'2' => 'Tier 2 -200 Rupees',
'3' => 'Tier 3 -300 Rupees',
)
));
$tierList = json_decode(TIER_LIST,true);
$feeList = json_decode(FEE_LIST,true);
?>
// drop down fields
<select class='browser-default selectField' id="TierSelection" onchange="onchangeFeeSelection()">
<option value="0">Choose your option</option>
<?php foreach($tierList as $value => $text) { ?>
<option value="<?php echo $value; ?>"><?php echo $text; ?></option>
<?php } ?>
</select>
<select class='browser-default selectField' id="FeeSelection">
<option value="">Choose your Fee option</option>
<?php foreach($feeList as $value => $text) { ?>
<option value="<?php echo $value; ?>"><?php echo $text; ?></option>
<?php } ?>
</select>
<input type = "text" id = "feeValue">
<script>
function onchangeFeeSelection(){
var TierSelection = $("#TierSelection").val();
if( TierSelection == 1){
$('select option:contains("Tier 1 -100 Rupees")').prop('selected',true);
$('#feeValue').val('100');
}
if( TierSelection == 2){
$('select option:contains("Tier 2 -200 Rupees")').prop('selected',true);
$('#feeValue').val('200');
}
if( TierSelection == 3){
$('select option:contains("Tier 3 -300 Rupees")').prop('selected',true);
$('#feeValue').val('300');
}
if( TierSelection == "0"){
$('select option:contains("Choose your Fee option")').prop('selected',true);
$('#feeValue').val('')
}
}
</script>
</body>
</html>
关于javascript - 从下拉列表中获取值并将其填充到另一个下拉列表以及输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56861612/