在输入中显示从下拉菜单中选择项目的默认值 - Show default value of select item from dropdown in input

Show default value of select item from dropdown in input

我有一个下拉菜单，看起来像这样:

<div class="col-md-2  padding-Zero" >
    <select id="ddlCompare1" class="dropdown" onChange="javascript:CompareLoantype(true);" >
        <option value="jumbo">Conv</option>
        <option selected  value="fha">FHA</option>
        <option value="va">VA</option>
        <option value="usda">USDA</option>
    </select>                                    
</div>

我希望将选中的默认值分配给以下输入:

  <input name="Compare_interest_rate" id="Compare_interest_rate" class="txt"   type="text" size="6" maxlength="6" style="width:75%" />%</p>

我有php上的选项的默认值，当我选择项目时如何指向它们。

FHA value => <?php echo $interest_FHA_default; ?>

VA value => <?php echo $interest_VA_default;?>

USDA value => <?php echo $interest_USDA_default;?>

CONV value => <?php echo $interest_CONV_default;?>

如何在输入中显示值取决于在下拉菜单中选择的项目?如果用户选择FHA项目，我需要FHA的默认值输入?

我不确定这是你想要的，当用户从下拉中选择输入中显示的默认值(默认值存储在data-default属性中)。

注意:在我的例子中，我不能使用php代码，为什么我在data-default中修复值，你可以用php代码替换每个项目的数字，例如:

<option data-default='<?php echo $interest_FHA_default; ?>' value="fha">FHA</option>

希望对你有帮助。

$('#ddlCompare1').change(function(){
    $('#Compare_interest_rate').val($(this).find(':selected').data('default'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2  padding-Zero" >
    <select id="ddlCompare1" class="dropdown">
        <option data-default='1' value="jumbo">Conv</option>
        <option data-default='2' value="fha" selected>FHA</option>
        <option data-default='3' value="va">VA</option>
        <option data-default='4' value="usda">USDA</option>
    </select>                                    
</div>
 <input name="Compare_interest_rate" id="Compare_interest_rate" class="txt"   type="text" size="6" maxlength="6" style="width:75%" />%</p>