Fetching values from drop down and filling it to another drop down and also for input field

user_8903444 0
Viewed 46

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.

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..

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);
    });
    });
html php jquery javascript
1 Answers

I have updated your code with adding jquery. Also I have tested this code.Its working well. option 01 option 02 option 03

How ever you need to modify this more What happen if someone try to select the option 02 at the fist place. So for a validation please do modify the java script.

<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>
user_110275060
Related