从下拉列表中获取值并将其填充到另一个下拉列表以及输入字段

Question

I want to create an object array that maps the first drop down key with second drop down value... Need to fetch object array from phpSimilarly on selecting tier drop down, fee drop down should gets updated as well as fee value should be in the input box. 我想创建一个对象数组，用第二个下拉值映射第一个下拉键...需要从php上获取对象数组在选择层下拉时，费用下拉应该更新以及费用值应该在输入框。

Example : if i select Tier 1 in first drop down , then it should change "tier 1- 100 rupees" in second drop down and also the input field should have updated value 100.. 示例：如果我在第一个下拉列表中选择第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);
    });
    });

Answer 1

I have updated your code with adding jquery . 我已经添加了jquery更新你的代码。 Also I have tested this code.Its working well. 我也测试了这段代码。它运行良好。

How ever you need to modify this more What happen if someone try to select the option 02 at the fist place . 你怎么还需要修改这个如果有人试图在第一个地方选择02选项会发生什么。 So for a validation please do modify the java script . 因此， 对于验证，请修改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>

从下拉列表中获取值并将其填充到另一个下拉列表以及输入字段

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-07-03 02:33:45

从下拉列表中获取值并将其填充到另一个下拉列表以及输入字段

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-07-03 02:33:45

解决方案1
2 已采纳 2019-07-03 02:33:45