javascript - 获取输入中的输入值

Question

我有以下选项的表格:

    <select name="choices" id="options" onchange="showText()">
    <option value="">Select amount</option>
    <option value="1">100PHP</option>
    <option value="2"> 500PHP</option>
    <option value="3"> 1000PHP</option>
    <option value="4"> 2000PHP</option>
    <option value="5"> 3000PHP</option>
    <option value="6"> 4000PHP</option>
    <option value="7"> 5000PHP</option>
    <option value="8"> 10,000PHP</option>
    <option value="others"> others..</option>
    </select>

    <div class="control-group" id="show" style="display:none;">

当用户选择选项 1-8 时，它会显示金额。我已经通过这个 javascript 成功地做到了这一点:

    function showText(){
   var value = document.getElementById('options').value;
   if(value == '1'){
   var amount = document.getElementById("amount");
   amount.value = "100";
   document.getElementById('show').innerHTML =
   "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 100 </b></font>"
   document.getElementById('show').style.display = "block";
   }
   else if(value == '2'){
   var amount = document.getElementById("amount");
   amount.value = "500";
   document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P 500 </b></font>" 
   document.getElementById('show').style.display = "block";
   }
   //up to option 8

现在，当用户选择“其他”时，它将显示另一个输入字段。用户将输入的值将是值选项“其他”:

    else if (value == 'others'){
   document.getElementById('show').innerHTML = "<br><div class='control-group'><label class='control-label'>Enter Amount</label><div class='controls'><input type='text' id='other_amount' name='other_amount'> ";
   var amount = document.getElementById("other_amount").value;
   document.getElementById('show').style.display = "block";
   }

不幸的是，我未能成功将第二个输入的值设为第一个输入的值。我希望你能帮忙!谢谢!

Answer 1

首先，您可以大大改进您的代码:

function showText(){
    var value = document.getElementById('options').value;
    if(value == '-1'){
       //Other
       document.getElementById('hidden').style.display = 'block';
    }
    else {
        document.getElementById('hidden').style.display = 'none';
        var amount = document.getElementById("amount");
        amount.value = value;
        document.getElementById('show').innerHTML = "<br><br><font size =+1><b>Amount&nbsp;&nbsp;&nbsp;P " + value + "</b></font>" 
        document.getElementById('show').style.display = "block";
    }
}

将 html 更改为:

<select name="choices" id="options" onchange="showText()">
    <option value="">Select amount</option>
    <option value="100">100PHP</option>
    <option value="500">500PHP</option>
    <option value="1000">1000PHP</option>
    <!-- (...) -->
    <option value="-1"> others..</option>
</select>

我还建议在他们选择已经在您的 html 中的 others 时添加“隐藏”输入，但将其设置为不可见:

<div id="hidden" style="display:none;"class='control-group'>
    <label class='control-label'>Enter Amount</label><div class='controls'>
        <input type='text' id='other_amount' name='other_amount' onChange='otherText()'/>
     </div>
</div>

现在，当他们选择值为 -1 的 others.. 时，您要显示一个输入，他们可以在其中选择自己的值:

if (value == -1) {
    document.getElementById('hidden').style.display = 'block';
}

现在我们只需要 otherText() 函数，这应该不是问题:

function otherText() {
        document.getElementById('amount').value = document.getElementById("other_amount").value;
}

Working jsFiddle