從下拉列表中獲取值並將其填充到另一個下拉列表以及輸入字段

Question

我想創建一個對象數組，用第二個下拉值映射第一個下拉鍵...需要從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);
    });
    });

Answer 1

我已經添加了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>

從下拉列表中獲取值並將其填充到另一個下拉列表以及輸入字段

問題描述

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